/* =========================================================
   MCTRADE24 – JTL-Shop 5.5 Child Template Base44 Design
   ========================================================= */

:root {
  --b44-gold: #E07B1A;
  --b44-gold-light: #f1953d;
  --b44-gold-dark: #c46610;
  --b44-anthracite: #2A2E31;
  --b44-anthracite-dark: #1E2124;
  --b44-canvas: #F9F9F7;
  --b44-stone: #EBEBE8;
  --b44-ink: #1A1C1E;
}

html {
  scroll-behavior: smooth !important;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  background-color: var(--b44-canvas) !important;
  color: var(--b44-ink) !important;
}

/* --- BRAND TOPBAR (b44-topbar) --- */
.b44-topbar {
  background-color: var(--b44-anthracite-dark) !important;
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}

.b44-topbar-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.b44-topbar-left, .b44-topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

.b44-topbar a {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: none !important;
  transition: color 0.15s ease-in-out !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.b44-topbar a:hover {
  color: #ffffff !important;
}

.b44-topbar i, .b44-topbar svg {
  color: var(--b44-gold) !important;
}

/* --- HEADER MAIN CONTAINER --- */
#jtl-nav-wrapper {
  background-color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03), 0 2px 4px -1px rgba(0, 0, 0, 0.02) !important;
  border-bottom: 1px solid var(--b44-stone) !important;
  padding: 0 !important;
}

.b44-header-main {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 8px 16px !important;
  gap: 32px !important;
  width: 100% !important;
  height: 64px !important;
  box-sizing: border-box !important;
}

/* Logo container styling */
.b44-logo-container {
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
}

.b44-logo-container img {
  height: 34px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
}

/* --- INTEGRATED SEARCH BAR (b44-search-container) --- */
.b44-search-container {
  flex: 1 !important;
  max-width: 580px !important;
  position: relative !important;
}

.b44-search-container form {
  margin: 0 !important;
  width: 100% !important;
}

.b44-search-container .input-group {
  display: flex !important;
  background-color: #ffffff !important;
  border: 2px solid var(--b44-stone) !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  width: 100% !important;
  transition: border-color 0.15s ease-in-out !important;
}

.b44-search-container .input-group:focus-within {
  border-color: var(--b44-gold) !important;
}

.b44-search-container input.form-control {
  flex: 1 !important;
  border: 0 !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
  color: var(--b44-ink) !important;
  outline: none !important;
  background: transparent !important;
  box-shadow: none !important;
  height: auto !important;
}

.b44-search-container .input-group-append {
  margin: 0 !important;
}

.b44-search-container button.btn {
  background-color: var(--b44-gold) !important;
  color: #ffffff !important;
  border: 0 !important;
  padding: 0 24px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background-color 0.15s ease-in-out !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  height: 100% !important;
  min-height: 38px !important;
}

.b44-search-container button.btn:hover {
  background-color: var(--b44-gold-dark) !important;
}

/* --- ACTION ITEMS (b44-actions) --- */
.b44-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-shrink: 0 !important;
}

/* Styling native JTL shop-nav items */
.b44-actions .nav-item {
  list-style: none !important;
}

.b44-actions .nav-link, 
.b44-actions .account-icon-dropdown > a, 
.b44-actions .cart-icon-dropdown > a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  background-color: transparent !important;
  color: var(--b44-ink) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: all 0.15s ease-in-out !important;
  border: 1px solid transparent !important;
}

.b44-actions .nav-link:hover, 
.b44-actions .account-icon-dropdown > a:hover, 
.b44-actions .cart-icon-dropdown > a:hover {
  background-color: var(--b44-canvas) !important;
  border-color: var(--b44-stone) !important;
  color: var(--b44-gold) !important;
}

.b44-actions i, .b44-actions svg {
  color: var(--b44-ink) !important;
  font-size: 16px !important;
  transition: color 0.15s ease-in-out !important;
}

.b44-actions .nav-link:hover i, 
.b44-actions .account-icon-dropdown > a:hover i,
.b44-actions .cart-icon-dropdown > a:hover i {
  color: var(--b44-gold) !important;
}

/* Shopping Cart Badge */
.b44-actions .cart-icon-dropdown {
  position: relative !important;
}

.b44-actions .cart-icon-dropdown .fa-shopping-cart {
  color: var(--b44-gold) !important;
}

.b44-actions .cart-icon-dropdown .badge {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
  background-color: var(--b44-gold) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  width: 18px !important;
  height: 18px !important;
  border-radius: 9999px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
.b44-navigation {
  background-color: var(--b44-anthracite) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  padding: 0 !important;
}

.b44-navigation #mainNavigation {
  background-color: var(--b44-anthracite) !important;
  width: 100% !important;
}

.b44-navigation .nav-mobile-body {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  width: 100% !important;
}

.b44-navigation .navbar-nav {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.b44-navigation .nav-item {
  position: relative !important;
}

.b44-navigation .nav-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 14px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.9) !important;
  text-decoration: none !important;
  transition: all 0.15s ease-in-out !important;
  background: transparent !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  border: 0 !important;
}

.b44-navigation .nav-item:hover > .nav-link,
.b44-navigation .nav-link:hover,
.b44-navigation .nav-item.show > .nav-link {
  color: var(--b44-gold) !important;
}

/* Highlight dynamic % Sale menu link in gold */
.b44-navigation .nav-item a[href*="sale"],
.b44-navigation .nav-item a[href*="Sale"],
.b44-navigation .nav-item a[href*="prozente"],
.b44-navigation .nav-item a[href*="Prozente"] {
  color: var(--b44-gold) !important;
  font-weight: 700 !important;
}

.b44-navigation .nav-item a[href*="sale"]:hover,
.b44-navigation .nav-item a[href*="Sale"]:hover {
  color: var(--b44-gold-light) !important;
}

/* Chevron arrows style */
.b44-navigation .nav-link::after {
  display: inline-block !important;
  margin-left: 0.355em !important;
  vertical-align: 0.255em !important;
  content: "" !important;
  border-top: 0.3em solid !important;
  border-right: 0.3em solid transparent !important;
  border-bottom: 0 !important;
  border-left: 0.3em solid transparent !important;
  transition: transform 0.2s ease-in-out !important;
}

.b44-navigation .nav-item:hover > .nav-link::after,
.b44-navigation .nav-item.show > .nav-link::after {
  transform: rotate(180deg) !important;
}

/* Dropdown Menu overrides */
.b44-navigation .dropdown-menu {
  background-color: #ffffff !important;
  border: 1px solid var(--b44-stone) !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  padding: 24px !important;
  top: 100% !important;
  margin-top: 0 !important;
}

.b44-navigation .dropdown-menu a {
  color: var(--b44-ink) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
}

.b44-navigation .dropdown-menu a:hover {
  background-color: var(--b44-canvas) !important;
  color: var(--b44-gold) !important;
  text-decoration: none !important;
}

/* Mobile Toggles & Menu support */
@media (max-width: 991.98px) {
  .b44-header-main {
    padding: 10px 16px !important;
    gap: 12px !important;
  }
  
  .b44-logo-container img {
    height: 32px !important;
  }
  
  .b44-search-container {
    display: none !important; /* Hide main search bar on mobile, use JTL mobile overlay */
  }

  .b44-actions {
    gap: 4px !important;
  }
  
  .b44-actions .account-icon-dropdown > a span.hidden {
    display: none !important;
  }

  .b44-navigation .nav-mobile-body {
    padding: 0 !important;
  }
  
  .b44-navigation .navbar-nav {
    flex-direction: column !important;
  }
  
  .b44-navigation .nav-link {
    width: 100% !important;
    justify-content: space-between !important;
    padding: 12px 20px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
  }
}

/* =========================================================
   BASE44 HERO SECTION & GRID LAYOUT
   ========================================================= */
.b44-hero-section {
  padding: 64px 0 72px !important;
  background-color: #222529 !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  overflow: visible !important;
}

.b44-hero-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
  padding: 0 24px !important;
}

.b44-hero-grid {
  display: grid !important;
  grid-template-columns: 48% 52% !important;
  gap: 32px !important;
  align-items: stretch !important;
}

@media (max-width: 991.98px) {
  .b44-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
}

.b44-hero-main-card {
  background: transparent !important;
  border-radius: 0 !important;
  padding: 0 40px 0 0 !important;
  color: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

.b44-hero-badge {
  background-color: rgba(255, 255, 255, 0.1) !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
  border-radius: 9999px !important;
  margin-bottom: 24px !important;
  letter-spacing: 0.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.b44-pulse-dot {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background-color: #10b981 !important;
  display: inline-block !important;
  animation: b44pulse 2s infinite !important;
}

@keyframes b44pulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.b44-hero-title {
  font-size: 54px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  margin-bottom: 20px !important;
  max-width: 600px !important;
  color: #ffffff !important;
  letter-spacing: -1px !important;
}

.b44-text-gold {
  color: var(--b44-gold) !important;
}

@media (max-width: 767.98px) {
  .b44-hero-title {
    font-size: 38px !important;
  }
  .b44-hero-main-card {
    padding: 32px 24px !important;
    min-height: auto !important;
  }
}

.b44-hero-subtitle {
  font-size: 16px !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-bottom: 36px !important;
  max-width: 520px !important;
  line-height: 1.6 !important;
}

.b44-hero-cta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
  margin-bottom: 36px !important;
}

.b44-hero-button {
  font-weight: 700 !important;
  font-size: 15px !important;
  padding: 14px 28px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.b44-hero-button.orange {
  background-color: var(--b44-gold) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(201, 162, 39, 0.3) !important;
}

.b44-hero-button.orange:hover {
  background-color: var(--b44-gold-light) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
  color: #ffffff !important;
}

.b44-hero-button.transparent {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.b44-hero-button.transparent:hover {
  background-color: rgba(255, 255, 255, 0.15) !important;
  transform: translateY(-2px) !important;
  text-decoration: none !important;
  color: #ffffff !important;
}

.b44-hero-usps-row {
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 28px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: rgba(255, 255, 255, 0.65) !important;
  margin-top: 4px !important;
}

.b44-usp-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: color 0.15s ease !important;
}

.b44-usp-item:hover {
  color: rgba(255, 255, 255, 0.9) !important;
}

.b44-usp-icon {
  color: #e07b1a !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  width: 16px !important;
  text-align: center !important;
}

.b44-hero-tiles-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(2, 1fr) !important;
  gap: 12px !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  align-content: stretch !important;
}

@media (max-width: 991.98px) {
  .b44-hero-tiles-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }
}

@media (max-width: 575.98px) {
  .b44-hero-tiles-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

.b44-hero-tile-card {
  position: relative !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background-color: #2a2d31 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 22px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  text-decoration: none !important;
  border: none !important;
  min-height: 220px !important;
  height: auto !important;
}

@media (max-width: 991.98px) {
  .b44-hero-tile-card {
    min-height: 180px !important;
  }
}

.b44-hero-tile-card::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.25) 55%, rgba(0,0,0,0.05) 100%) !important;
  z-index: 2 !important;
  transition: background 0.3s ease !important;
}

.b44-hero-tile-card:hover {
  transform: scale(1.025) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
  text-decoration: none !important;
  z-index: 3 !important;
}

.b44-hero-tile-card:hover::before {
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.02) 100%) !important;
}

/* Deaktivierung der alten CSS-Hintergrundbilder für optimierten LCP */
.tile-beleuchtung,
.tile-heim-haus,
.tile-werkstatt,
.tile-sale {
  background-image: none !important;
}

.b44-tile-bg-img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.b44-hero-tile-card:hover .b44-tile-bg-img {
  transform: scale(1.05) !important;
}

.b44-tile-content {
  position: relative !important;
  z-index: 3 !important;
}

.b44-tile-badge {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: var(--b44-gold) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 6px !important;
}

.b44-tile-title {
  font-size: 20px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 !important;
}

.b44-hero-tile-card:hover .b44-tile-title {
  color: var(--b44-gold) !important;
}

.b44-tile-sale-badge {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  background-color: #d93838 !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  letter-spacing: 1px !important;
  z-index: 2 !important;
}


/* --- BASE44 CATEGORY STRIP --- */
.b44-category-strip {
  padding: 20px 16px 40px 16px !important;
  background-color: var(--b44-canvas) !important;
  width: 100% !important;
}

.b44-category-strip-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.b44-category-strip-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 16px !important;
}

@media (max-width: 991.98px) {
  .b44-category-strip-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

@media (max-width: 575.98px) {
  .b44-category-strip-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

.b44-category-card {
  background-color: #ffffff !important;
  border: 1px solid var(--b44-stone) !important;
  border-radius: 8px !important;
  padding: 20px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.01) !important;
}

.b44-category-card:hover {
  transform: translateY(-2px) !important;
  border-color: var(--b44-gold) !important;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.04) !important;
  text-decoration: none !important;
}

.b44-category-icon {
  font-size: 24px !important;
  color: var(--b44-gold) !important;
  transition: transform 0.2s ease-in-out !important;
}

.b44-category-card:hover .b44-category-icon {
  transform: scale(1.1) !important;
}

.b44-category-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--b44-ink) !important;
}

/* =========================================================
   BASE44 PRODUCT CARD & SLIDER OVERRIDES
   ========================================================= */
.b44-product-card {
  background-color: #ffffff !important;
  border: 1px solid var(--b44-stone) !important;
  border-radius: 16px !important;
  padding: 20px !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
  position: relative !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
}

.b44-product-card:hover {
  transform: translateY(-6px) !important;
  border-color: var(--b44-gold) !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06) !important;
}

.b44-card-link-wrapper {
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  width: 100% !important;
}

.b44-card-image-container {
  position: relative !important;
  width: 100% !important;
  padding-top: 100% !important;
  background-color: #ffffff !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

.b44-card-img-main {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  max-width: 90% !important;
  max-height: 90% !important;
  object-fit: contain !important;
  transition: transform 0.4s ease !important;
}

.b44-product-card:hover .b44-card-img-main {
  transform: translate(-50%, -50%) scale(1.05) !important;
}

.b44-card-badges-container {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  z-index: 3 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.b44-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.b44-badge.sale {
  background-color: #d93838 !important;
  color: #ffffff !important;
}

.b44-badge.out-of-stock {
  background-color: #71717a !important;
  color: #ffffff !important;
}

.b44-card-body {
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
}

.b44-card-category {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #a1a1aa !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 8px !important;
  display: block !important;
  text-align: left !important;
}

.b44-card-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--b44-ink) !important;
  line-height: 1.4 !important;
  margin: 0 0 12px 0 !important;
  min-height: 40px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  transition: color 0.2s ease !important;
  text-align: left !important;
}

.b44-product-card:hover .b44-card-title {
  color: var(--b44-gold) !important;
}

.b44-card-rating {
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
  text-align: left !important;
}

.b44-card-price-row {
  margin-top: auto !important;
  border-top: 1px solid var(--b44-stone) !important;
  padding-top: 12px !important;
  text-align: left !important;
}

.b44-card-price-row .price_wrapper {
  color: var(--b44-ink) !important;
  font-weight: 700 !important;
  font-size: 18px !important;
}

.b44-card-price-row .price_wrapper .price {
  color: var(--b44-ink) !important;
  font-size: 20px !important;
  font-weight: 800 !important;
}

.b44-card-price-row .price_wrapper .price.special {
  color: #d93838 !important;
}

.b44-card-price-row .price-note {
  font-size: 11px !important;
  color: #71717a !important;
  font-weight: 400 !important;
}

/* Global scrollbar and layout container fixes */
html, body {
  overflow-x: hidden !important;
  max-width: 100% !important;
  width: 100% !important;
}

.b44-hero-container, .b44-category-strip-container, .b44-footer-stats-container, .b44-footer-brands-container, .b44-footer-columns-container, .b44-footer-bottom-container {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.product-slider-wrapper, .product-grid, .productbox {
  max-width: 100% !important;
  box-sizing: border-box !important;
}


/* Slick slider spacing tweaks */
.product-slider-wrapper {
  padding: 40px 16px !important;
  background-color: var(--b44-canvas) !important;
}

/* Beautiful dynamic section headers */
div.hr-sect.h2 {
  font-size: 24px !important;
  font-weight: 800 !important;
  color: var(--b44-ink) !important;
  margin-top: 20px !important;
  margin-bottom: 30px !important;
  text-align: left !important;
  display: flex !important;
  align-items: center !important;
  border-bottom: 2px solid var(--b44-gold) !important;
  padding-bottom: 12px !important;
  width: fit-content !important;
}

div.hr-sect.h2::before,
div.hr-sect.h2::after {
  display: none !important; /* Hide old NOVA dashed borders */
}

/* =========================================================
   BASE44 STATS LEISTE
   ========================================================= */
.b44-footer-stats {
  padding: 48px 16px !important;
  background-color: var(--b44-anthracite) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  width: 100% !important;
}

.b44-footer-stats-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.b44-footer-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 24px !important;
}

@media (max-width: 991.98px) {
  .b44-footer-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 575.98px) {
  .b44-footer-stats-grid {
    grid-template-columns: 1fr !important;
  }
}

.b44-footer-stats-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.b44-stats-value {
  font-size: 32px !important;
  font-weight: 800 !important;
  color: var(--b44-gold) !important;
  margin-bottom: 8px !important;
  line-height: 1.2 !important;
}

.b44-stats-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* =========================================================
   BASE44 BRANDS LEISTE
   ========================================================= */
/* =========================================================
   BASE44 BRANDS LEISTE - DYNAMIC INF-SCROLL MARQUEE
   ========================================================= */
.b44-brands-section {
  background: #ffffff !important;
  padding: 28px 0 34px !important;
  overflow: hidden !important;
  border-bottom: 1px solid #e5e7eb !important;
  width: 100% !important;
}

.b44-brands-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  width: 100% !important;
  position: relative !important;
}

.b44-brands-viewport {
  width: 100% !important;
  overflow: hidden !important;
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  height: 90px !important;
  padding: 4px 0 !important; /* Cushions vertical card hover shadows */
}

/* Premium gradient fades at borders for seamless blending out */
.b44-brands-viewport::before,
.b44-brands-viewport::after {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  width: 90px !important;
  height: 100% !important;
  z-index: 5 !important;
  pointer-events: none !important;
}

.b44-brands-viewport::before {
  left: 0 !important;
  background: linear-gradient(to right, #ffffff 15%, transparent) !important;
}

.b44-brands-viewport::after {
  right: 0 !important;
  background: linear-gradient(to left, #ffffff 15%, transparent) !important;
}

.b44-brands-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 24px !important;
  width: max-content !important;
  animation: b44BrandScroll 38s linear infinite !important;
  will-change: transform !important;
}

.b44-brands-viewport:hover .b44-brands-track {
  animation-play-state: paused !important;
}

.b44-brand-card {
  flex: 0 0 150px !important;
  width: 150px !important;
  height: 78px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  box-sizing: border-box !important;
  transition: all .25s ease !important;
  text-decoration: none !important;
}

.b44-brand-card:hover {
  transform: translateY(-2px) !important;
  border-color: #e07b1a !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
  text-decoration: none !important;
}

.b44-brand-card img {
  display: block !important;
  max-width: 110px !important;
  max-height: 42px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  filter: grayscale(100%) !important;
  opacity: 0.6 !important;
  transition: all 0.3s ease !important;
}

.b44-brand-card:hover img {
  filter: grayscale(0%) !important;
  opacity: 1 !important;
}

.b44-brand-text {
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #111827 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  width: 100% !important;
}

@keyframes b44BrandScroll {
  from {
    transform: translateX(0) !important;
  }
  to {
    transform: translateX(-50%) !important;
  }
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .b44-brands-track {
    gap: 20px !important;
    animation-duration: 48s !important;
  }
  
  .b44-brands-viewport::before,
  .b44-brands-viewport::after {
    width: 50px !important;
  }
}

@media (max-width: 575px) {
  .b44-brands-track {
    gap: 16px !important;
    animation-duration: 58s !important;
  }
  
  .b44-brands-viewport::before,
  .b44-brands-viewport::after {
    width: 24px !important;
  }
}

/* =========================================================
   BASE44 MAIN ANTHRACITE FOOTER
   ========================================================= */
.b44-main-footer {
  background-color: var(--b44-anthracite-dark) !important;
  color: rgba(255, 255, 255, 0.6) !important;
  padding: 72px 16px 40px 16px !important;
  width: 100% !important;
}

.b44-footer-columns-container {
  max-width: 1280px !important;
  margin: 0 auto 40px auto !important;
  width: 100% !important;
}

.b44-footer-grid {
  display: grid !important;
  grid-template-columns: 1.4fr 0.85fr 0.9fr 0.85fr !important;
  gap: 32px !important;
}

@media (max-width: 991.98px) {
  .b44-footer-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

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

.b44-footer-logo {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  letter-spacing: -0.5px !important;
  margin-bottom: 16px !important;
  display: block !important;
  text-align: left !important;
}

.b44-footer-logo-link {
  display: inline-flex !important;
  align-items: center !important;
  margin-bottom: 22px !important;
  text-decoration: none !important;
}

.b44-footer-logo-img {
  display: block !important;
  width: auto !important;
  max-width: 190px !important;
  height: auto !important;
  max-height: 42px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important; /* Premium White filter for dark backgrounds */
}

.b44-footer-brand-desc {
  font-size: 14px !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
  color: rgba(255, 255, 255, 0.6) !important;
  text-align: left !important;
}

.b44-footer-contact-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.b44-contact-link {
  color: rgba(255, 255, 255, 0.8) !important;
  text-decoration: none !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  transition: color 0.2s ease !important;
}

.b44-contact-link:hover {
  color: var(--b44-gold) !important;
  text-decoration: none !important;
}

.b44-contact-text {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.b44-contact-icon {
  color: var(--b44-gold) !important;
  width: 16px !important;
  text-align: center !important;
}

/* Format JTL dynamically rendered menu headers in footer */
.b44-footer-column h5,
.b44-footer-column-title,
.b44-footer-column .nav-link-header,
.b44-footer-column div[class*="title"] {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  text-align: left !important;
}

.b44-footer-column a,
.b44-footer-column .nav-link {
  color: rgba(255, 255, 255, 0.6) !important;
  font-size: 14px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
  margin-bottom: 10px !important;
  text-align: left !important;
  padding: 0 !important;
}

.b44-footer-column a:hover,
.b44-footer-column .nav-link:hover {
  color: var(--b44-gold) !important;
  transform: translateX(4px) !important;
  text-decoration: none !important;
}

.b44-footer-column ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.b44-footer-column li {
  margin-bottom: 8px !important;
  text-align: left !important;
}

/* Payment capsules inside Rechtliches column */
.b44-payment-capsules-group {
  margin-top: 24px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.b44-capsule-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  text-align: left !important;
}

.b44-capsules-flex {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.b44-capsule {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

/* Shipping and Payment Badges Leiste */
.b44-footer-badges-strip {
  margin-top: 60px !important;
  padding-top: 32px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 24px !important;
}

.b44-badge-strip-col {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
}

.b44-strip-label {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: rgba(255, 255, 255, 0.4) !important;
  letter-spacing: 1px !important;
  margin-right: 4px !important;
}

.b44-badge-card {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 13px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
}

.b44-payment-icons-flex {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

.b44-payment-icon-card {
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background-color: rgba(255, 255, 255, 0.04) !important;
}

.b44-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  padding-top: 30px !important;
  background-color: var(--b44-anthracite-dark) !important;
}

.b44-footer-bottom-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  width: 100% !important;
}

.footnote-vat {
  color: rgba(255, 255, 255, 0.5) !important;
  font-size: 11px !important;
  margin-bottom: 20px !important;
  text-align: left !important;
}

.footnote-vat a {
  color: rgba(255, 255, 255, 0.7) !important;
  text-decoration: underline !important;
}

.footnote-vat a:hover {
  color: var(--b44-gold) !important;
}

.b44-footer-hr {
  border-color: rgba(255, 255, 255, 0.08) !important;
  margin: 20px 0 !important;
}

.b44-footer-copyright-row {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 13px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  padding-bottom: 20px !important;
}

.b44-system-credits {
  color: rgba(255, 255, 255, 0.5) !important;
}

.b44-system-credits a {
  color: var(--b44-gold) !important;
  text-decoration: none !important;
}

.b44-system-credits a:hover {
  text-decoration: underline !important;
}

@media (max-width: 575.98px) {
  .b44-footer-copyright-row {
    flex-direction: column !important;
    gap: 10px !important;
    text-align: center !important;
  }
}


/* =========================================================
   BASE44 NAVIGATION & MEGAMENU BAR
   ========================================================= */
.b44-navigation {
  background-color: var(--b44-anthracite) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
  width: 100% !important;
  z-index: 99 !important;
  position: relative !important;
}

.b44-nav-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  padding: 0 16px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.b44-nav-item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
}

.b44-nav-link {
  color: #ffffff !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  padding: 11px 11px !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  letter-spacing: 0.1px !important;
  white-space: nowrap !important;
}

.b44-nav-item:hover .b44-nav-link {
  background-color: var(--b44-anthracite-dark) !important;
  color: var(--b44-gold) !important;
  text-decoration: none !important;
}

.b44-nav-caret {
  font-size: 8px !important;
  margin-left: 2px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  transition: transform 0.2s ease !important;
  opacity: 0.7 !important;
}

.b44-nav-item:hover .b44-nav-caret {
  transform: rotate(180deg) !important;
  color: var(--b44-gold) !important;
}

@media (max-width: 1200px) {
  .b44-nav-link {
    padding: 11px 8px !important;
    font-size: 12.5px !important;
  }
}

/* Beautiful Megamenu Dropdown Drawer */
.b44-dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  background-color: #ffffff !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
  transform: translateY(8px) !important;
  z-index: 100 !important;
  padding: 24px !important;
  border: 1px solid var(--b44-stone) !important;
  border-top: none !important;
  min-width: 680px !important;
}

/* Right-align dropdowns for rightmost menu items to prevent cut-off */
.b44-nav-item:nth-last-child(-n+4) .b44-dropdown-menu {
  left: auto !important;
  right: 0 !important;
}

.b44-nav-item:hover .b44-dropdown-menu {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.b44-dropdown-inner {
  display: flex !important;
  gap: 32px !important;
  align-items: stretch !important;
  justify-content: space-between !important;
}

/* Left Subcategories Column */
.b44-dropdown-left {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.b44-dropdown-title-row {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  border-bottom: 2px solid var(--b44-stone) !important;
  padding-bottom: 8px !important;
  margin-bottom: 4px !important;
}

.b44-dropdown-header {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: var(--b44-ink) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.b44-all-link {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: var(--b44-gold) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.b44-all-link:hover {
  color: var(--b44-gold-dark) !important;
  text-decoration: underline !important;
}

.b44-dropdown-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px 24px !important;
  min-width: 320px !important;
}

.b44-dropdown-link {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #555c61 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
  text-align: left !important;
  display: block !important;
}

.b44-dropdown-link:hover {
  color: var(--b44-gold) !important;
  text-decoration: none !important;
  transform: translateX(3px) !important;
}

/* Right Dynamic Product Recommendation Column */
.b44-dropdown-right {
  width: 220px !important;
  background-color: var(--b44-canvas) !important;
  border: 1px solid var(--b44-stone) !important;
  border-radius: 6px !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
  flex-shrink: 0 !important;
  transition: border-color 0.2s ease !important;
}

.b44-dropdown-right:hover {
  border-color: var(--b44-gold) !important;
}

.b44-tip-badge {
  background-color: var(--b44-gold) !important;
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  padding: 3px 8px !important;
  border-radius: 9999px !important;
  margin-bottom: 12px !important;
  text-transform: uppercase !important;
}

.b44-tip-image-wrapper {
  width: 100px !important;
  height: 100px !important;
  background-color: #ffffff !important;
  border-radius: 4px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.03) !important;
}

.b44-tip-image {
  max-width: 90% !important;
  max-height: 90% !important;
  object-fit: contain !important;
}

.b44-tip-title {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--b44-ink) !important;
  line-height: 1.4 !important;
  margin-bottom: 12px !important;
  height: 36px !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.b44-tip-btn {
  font-size: 12px !important;
  font-weight: 700 !important;
  color: var(--b44-gold) !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
  margin-top: auto !important;
}

.b44-tip-btn:hover {
  color: var(--b44-gold-dark) !important;
  text-decoration: underline !important;
}


/* =========================================================
   ACCESSIBILITY SKIP LINKS (btn-skip-to)
   ========================================================= */
.btn-skip-to {
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  background-color: var(--b44-gold) !important;
  color: #ffffff !important;
  padding: 10px 20px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  z-index: 100000 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15) !important;
  transition: none !important;
  font-size: 13px !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.btn-skip-to:focus, .btn-skip-to:active {
  left: 20px !important;
  top: 20px !important;
  outline: 3px solid var(--b44-ink) !important;
  color: #ffffff !important;
  text-decoration: none !important;
}


/* ==========================================
   B44 Premium Topbar Styles
   ========================================== */
.b44-topbar {
  background-color: #1a1a1a !important; /* Premium dark anthracite */
  border-bottom: 1px solid #2a2a2a !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #a0a0a0 !important;
  height: 34px !important;
  display: flex !important;
  align-items: center !important;
}

.b44-topbar-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
}

.b44-topbar-left,
.b44-topbar-right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.b44-topbar-link {
  color: #a0a0a0 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
  display: flex !important;
  align-items: center !important;
}

.b44-topbar-link:hover {
  color: #e07b1a !important; /* Base44 Gold/Orange hover */
  text-decoration: none !important;
}

.b44-topbar-link span.fas {
  color: #e07b1a !important; /* Gold icons */
}

.b44-topbar-text {
  color: #a0a0a0 !important;
  display: flex !important;
  align-items: center !important;
}

.b44-topbar-text span.fas {
  color: #e07b1a !important; /* Gold icons */
}

.b44-topbar-divider {
  color: #333333 !important;
  font-weight: 300 !important;
}


/* --- SEARCH BAR & LIVE SUGGESTIONS BASE44 STYLING --- */
.b44-search-container {
    flex-grow: 1 !important;
    max-width: 680px !important;
    margin: 0 2rem !important;
}

.b44-search-wrapper {
    position: relative !important;
    width: 100% !important;
}

.b44-search-form {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.b44-search-input-group {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    border-radius: 4px !important;
    height: 46px !important;
    width: 100% !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out !important;
}

.b44-search-input-group:focus-within {
    border-color: #e07b1a !important;
    box-shadow: 0 0 0 3px rgba(224, 123, 26, 0.15) !important;
}

.b44-search-input {
    flex-grow: 1 !important;
    height: 100% !important;
    border: none !important;
    padding: 0 148px 0 16px !important; /* Right pad: orange button (~100px) + X (~28px) + gap */
    font-size: 14px !important;
    color: #1a1a1a !important;
    background: transparent !important;
    outline: none !important;
    box-shadow: none !important;
}

.b44-search-input::placeholder {
    color: #999999 !important;
    font-style: italic !important;
}

/* Clear X Button */
.b44-search-clear {
    position: absolute !important;
    right: 116px !important; /* 100px button width + 16px gap = safely inside white input area */
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    color: #aaaaaa !important;
    font-size: 14px !important;
    padding: 6px 8px !important;
    cursor: pointer !important;
    z-index: 10 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.15s ease-in-out !important;
}

.b44-search-clear:hover {
    color: #1a1a1a !important;
}

/* Search Submit Button */
.b44-search-button {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    background: #e07b1a !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 0 24px !important;
    display: flex !important;
    align-items: center !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease-in-out !important;
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
    outline: none !important;
}

.b44-search-button:hover {
    background: #c5650d !important;
}

.b44-search-button span.fas {
    font-size: 15px !important;
}

/* Suggestions Dropdown Container - only visible when NOT d-none */
.b44-search-suggestions {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
    z-index: 9999 !important;
    padding: 16px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: 520px !important;
    overflow-y: auto !important;
}

/* When hidden: no border, no shadow, no layout impact */
.b44-search-suggestions.d-none {
    display: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* Header Count Row */
.b44-suggest-header {
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    color: #999999 !important;
    padding: 0 16px 10px 16px !important;
    border-bottom: 1px solid #f2f2f2 !important;
    margin-bottom: 8px !important;
    text-transform: uppercase !important;
}

/* Suggestion Product Item Row */
.b44-suggest-item {
    display: flex !important;
    align-items: center !important;
    padding: 10px 16px !important;
    text-decoration: none !important;
    transition: background-color 0.15s ease-in-out !important;
    border-bottom: 1px solid #f9f9f9 !important;
}

.b44-suggest-item:last-of-type {
    border-bottom: none !important;
}

.b44-suggest-item:hover {
    background-color: #f7f7f7 !important;
}

.b44-suggest-img-wrap {
    width: 48px !important;
    height: 48px !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 14px !important;
    flex-shrink: 0 !important;
}

.b44-suggest-img-wrap img {
    max-width: 44px !important;
    max-height: 44px !important;
    object-fit: contain !important;
}

.b44-suggest-info {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    min-width: 0 !important; /* Prevents text overflow issues */
}

.b44-suggest-cat {
    font-size: 9px !important;
    font-weight: 700 !important;
    color: #e07b1a !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 2px !important;
    text-align: left !important;
}

.b44-suggest-name {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    line-height: 1.35 !important;
    margin-bottom: 2px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    text-align: left !important;
}

.b44-suggest-price {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    text-align: left !important;
}

.b44-suggest-arrow {
    font-size: 16px !important;
    color: #cccccc !important;
    margin-left: 12px !important;
    transition: transform 0.15s ease-in-out, color 0.15s ease-in-out !important;
}

.b44-suggest-item:hover .b44-suggest-arrow {
    color: #e07b1a !important;
    transform: translateX(3px) !important;
}

/* Footer Link row */
.b44-suggest-footer {
    display: block !important;
    text-align: center !important;
    padding: 12px 16px 0 16px !important;
    margin-top: 8px !important;
    border-top: 1px solid #f2f2f2 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #e07b1a !important;
    text-decoration: none !important;
    transition: color 0.15s ease-in-out !important;
}

.b44-suggest-footer:hover {
    color: #c5650d !important;
}

/* Hide default JTL suggestion backdrop if present */
#jtl-search-backdrop, .jtl_search_results {
    display: none !important;
}

/* --- FOCUS PANEL: Section Titles --- */
.b44-suggest-section-title {
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    color: #999999 !important;
    text-transform: uppercase !important;
    padding: 4px 16px 8px 16px !important;
    margin-bottom: 4px !important;
}

.b44-suggest-section-title.mt-3 {
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid #f2f2f2 !important;
}

/* --- FOCUS PANEL: Beliebte Suchen Chips --- */
.b44-suggest-chips-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    padding: 0 16px 8px 16px !important;
}

.b44-suggest-chip {
    display: inline-flex !important;
    align-items: center !important;
    padding: 5px 12px !important;
    background: #f5f5f5 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #333333 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, color 0.15s ease-in-out !important;
    user-select: none !important;
    white-space: nowrap !important;
}

.b44-suggest-chip:hover {
    background: #fff5ec !important;
    border-color: #e07b1a !important;
    color: #e07b1a !important;
}

/* Break JTL standard container wrapper constraints on the startpage to allow 1280px wide layouts */
body[data-page="18"] #content-wrapper,
body[data-page="18"] #content,
body[data-page="18"] #main-wrapper,
body[data-page="18"] main,
body.template-index #content-wrapper,
body.template-index #content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Neutralize JTL standard absolute positioning and margins on homepage grids and cards */
body[data-page="18"] .product-wrapper,
body[data-page="18"] .item-slider,
body[data-page="18"] .productbox-image,
body[data-page="18"] .square,
body[data-page="18"] .square-image,
body.template-index .product-wrapper,
body.template-index .item-slider,
body.template-index .productbox-image,
body.template-index .square,
body.template-index .square-image {
    position: static !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    height: auto !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    overflow: visible !important;
}

/* --- BASE44 PRODUCT SECTION & GRID --- */
.b44-product-section {
    max-width: 1280px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 56px 24px !important;
    background-color: var(--b44-canvas) !important;
}

.b44-product-section .b44-hero-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

.b44-section-header {
    margin-bottom: 32px !important;
}

.b44-section-subtitle {
    display: block !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--b44-gold) !important;
    letter-spacing: 1.5px !important;
    margin-bottom: 8px !important;
}

.b44-product-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(240px, 1fr)) !important;
    gap: 24px !important;
    align-items: stretch !important;
}

.b44-product-grid > * {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    float: none !important;
    flex: initial !important;
}

.b44-product-grid > .col,
.b44-product-grid > [class*="col-"],
.b44-product-grid > .product-wrapper,
.b44-product-grid > .item-slider {
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: initial !important;
}

@media (max-width: 1199.98px) {
    .b44-product-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }
}

@media (max-width: 575.98px) {
    .b44-product-grid {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

/* --- BASE44 PRODUCT CARD --- */
.b44-product-card {
    position: relative !important;
    overflow: hidden !important;
    height: auto !important;
    min-height: 445px !important;
    display: flex !important;
    flex-direction: column !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 8px 24px rgba(15,23,42,.06) !important;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important;
    width: 100% !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.b44-product-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 18px 40px rgba(15,23,42,.12) !important;
    border-color: rgba(224,123,26,.35) !important;
}

.b44-product-image-area,
.b44-product-card-image,
.b44-product-image {
    height: 245px !important;
    min-height: 245px !important;
    max-height: 245px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #fff !important;
    position: relative !important;
    width: 100% !important;
    padding: 14px !important;
    box-sizing: border-box !important;
}

.b44-product-card-link {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

.b44-product-card-link .image-wrapper,
.b44-product-card-link picture {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.b44-product-card-image img,
.b44-product-image img,
.b44-product-card-link .image-wrapper img,
.b44-product-image-area img,
.b44-product-card img {
    max-width: 96% !important;
    max-height: 96% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    position: static !important;
    transform: none !important;
    margin: 0 !important;
    transition: transform 0.4s ease !important;
}

.b44-product-card:hover .b44-product-card-image img,
.b44-product-card:hover .b44-product-image img,
.b44-product-card:hover .b44-product-card-link .image-wrapper img {
    transform: scale(1.05) !important;
}

/* Badges */
.b44-product-badges {
    position: absolute !important;
    top: 16px !important;
    left: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    z-index: 2 !important;
}

.b44-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    min-width: 58px !important;
    height: 22px !important;

    padding: 0 10px !important;

    line-height: 1 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;

    border-radius: 6px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

.b44-badge-sale {
    background-color: #d93838 !important;
    color: #ffffff !important;
}

.b44-badge-new {
    background-color: #3b82f6 !important; /* Premium royal blue for NEU */
    color: #ffffff !important;
}

.b44-badge-top {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #ffffff !important;
}

.b44-badge-shipping {
    background-color: #10b981 !important; /* Premium emerald green for SOFORT */
    color: #ffffff !important;
}

/* Wishlist Heart */
.b44-product-wishlist {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 10 !important;
}

.b44-wishlist-btn {
    background: #ffffff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 36px !important;
    height: 36px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #4b5563 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08) !important;
}

.b44-wishlist-btn:hover {
    color: #d93838 !important;
    box-shadow: 0 6px 14px rgba(217,56,56,0.15) !important;
}

/* Hover Overlay */
.b44-product-hover-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(to top, rgba(17, 24, 39, 0.48) 0%, rgba(17, 24, 39, 0) 70%) !important;
  backdrop-filter: none !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 16px 12px !important;
  gap: 6px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity .2s ease !important;
  z-index: 5 !important;
  box-sizing: border-box !important;
}

.b44-product-image-area:hover .b44-product-hover-overlay {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Ensure product image remains visible on hover */
.b44-product-image-area img,
.b44-product-image-area:hover img,
.b44-product-card:hover img {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hide legacy stock badges but let our new shipping badge live */
.b44-badge-stock,
.b44-product-badge-stock,
.b44-product-badge--stock {
  display: none !important;
}



.b44-badge-shipping-status {
  display: none !important;
}

/* Premium Orange Category Styling */
.b44-product-category {
  color: #e07b1a !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
  display: block !important;
  position: relative !important;
  z-index: 3 !important;
  pointer-events: auto !important;
}

.b44-product-hover-btn {
  max-width: none !important;
  width: 90% !important;
  height: 34px !important;
  border-radius: 6px !important;
  border: 0 !important;
  background: #fff !important;
  color: #111827 !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  text-decoration: none !important;
  transition: background .2s ease, transform .1s ease !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.b44-product-hover-btn:hover {
  background: #f3f4f6 !important;
  transform: translateY(-1px) !important;
  color: #111827 !important;
  text-decoration: none !important;
}

.b44-product-hover-btn--cart {
  background: #e07b1a !important;
  color: #fff !important;
}

.b44-product-hover-btn--cart:hover {
  background: #c86a12 !important;
  color: #fff !important;
}

.b44-product-hover-btn--notify {
  background: #111827 !important;
  color: #fff !important;
}

.b44-product-hover-btn--notify:hover {
  background: #1f2937 !important;
  color: #fff !important;
}

.b44-product-hover-btn--compare {
  background: rgba(255, 255, 255, 0.85) !important;
  color: #111827 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.b44-product-hover-btn--compare:hover {
  background: rgba(255, 255, 255, 1) !important;
  color: #111827 !important;
}

.b44-product-image-area {
  position: relative !important;
  overflow: hidden !important;
}

/* Info Area */
.b44-product-card-body,
.b44-product-card-info {
    padding: 18px 20px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    background: #fff !important;
    border-top: none !important;
    position: relative !important;
    z-index: 2 !important;
    height: auto !important;
    min-height: 0 !important;
}

.b44-product-category {
    color: #e07b1a !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
    margin-bottom: 2px !important;
}

.b44-product-title {
    font-size: 15px !important;
    line-height: 1.35 !important;
    font-weight: 800 !important;
    color: #111827 !important;
    min-height: 42px !important;
    margin-bottom: 4px !important;
    overflow: hidden !important;
}

.b44-product-title a {
    color: var(--b44-anthracite-dark) !important;
    text-decoration: none !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.b44-product-title a:hover {
    color: var(--b44-gold) !important;
}

.b44-product-rating {
    font-size: 11px !important;
    color: #f59e0b !important;
    margin-bottom: 8px !important;
}

.b44-product-rating.b44-rating-empty {
    color: #d1d5db !important;
}

.b44-product-price-row {
    display: flex !important;
    align-items: flex-end !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 4px !important;
}

.b44-product-old-price {
    font-size: 13px !important;
    color: #999999 !important;
    text-decoration: line-through !important;
    font-weight: 500 !important;
}

.b44-product-price {
    font-size: 22px !important;
    font-weight: 900 !important;
    color: #111827 !important;
    line-height: 1 !important;
}

.b44-product-price.b44-price-sale {
    color: #d93838 !important;
}

.b44-product-tax-info,
.b44-product-tax {
    font-size: 11px !important;
    color: #6b7280 !important;
}

.b44-product-tax-info a,
.b44-product-tax a {
    color: #6b7280 !important;
    text-decoration: underline !important;
}

/* Unified Spacing & Background System */
#content,
#content-wrapper,
main,
.product-slider-wrapper {
    background-color: #fafafa !important;
}

.b44-category-strip {
    margin-bottom: 48px !important;
    padding-bottom: 0 !important;
}

/* Warum MCTRADE24? Benefits Section */
.b44-benefits-section {
    background: #ffffff !important;
    padding: 64px 0 !important;
    margin-bottom: 56px !important;
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    position: relative !important;
    z-index: 10 !important;
}

.b44-benefits-header {
    text-align: center !important;
    max-width: 680px !important;
    margin: 0 auto 40px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.b44-benefits-subtitle {
    color: #e07b1a !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    display: block !important;
    margin-bottom: 8px !important;
}

.b44-benefits-title {
    color: #111827 !important;
    font-size: 32px !important;
    font-weight: 800 !important;
    margin: 0 0 14px 0 !important;
    letter-spacing: -0.02em !important;
}

.b44-benefits-desc {
    color: #6b7280 !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

.b44-benefits-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    box-sizing: border-box !important;
}

@media (max-width: 991px) {
    .b44-benefits-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
}

.b44-benefit-card {
    background: #fafafa !important;
    padding: 32px 28px !important;
    border-radius: 12px !important;
    border: 1px solid #f1f5f9 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.b44-benefit-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.04) !important;
}

.b44-benefit-header-row {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    margin-bottom: 16px !important;
}

.b44-benefit-icon-wrap {
    flex-shrink: 0 !important;
    width: 48px !important;
    height: 48px !important;
    background: rgba(224,123,26,0.08) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.b44-benefit-icon {
    color: #e07b1a !important;
    font-size: 18px !important;
}

.b44-benefit-card-title {
    color: #111827 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.b44-benefit-card-text {
    color: #4b5563 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* Product Section Spacing Overrides */
.product-slider-wrapper {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.product-slider-wrapper + .product-slider-wrapper {
    margin-top: 60px !important;
}

.b44-product-section {
    background: #fafafa !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.b44-product-section-header {
    text-align: center !important;
    margin-bottom: 24px !important;
}

.b44-section-kicker {
    color: #e07b1a !important;
    text-transform: uppercase !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.12em !important;
    display: block !important;
    margin-bottom: 6px !important;
}

.b44-product-section-title {
    color: #111827 !important;
    font-size: 28px !important;
    font-weight: 800 !important;
    margin: 0 !important;
    letter-spacing: -0.02em !important;
}

.b44-product-section-title a {
    color: inherit !important;
    text-decoration: none !important;
}

.b44-product-grid {
    margin-top: 0 !important;
}

/* === PREMIUM TRUST BLOCK / KUNDENSTIMMEN === */
.b44-trust-section {
    background: #ffffff !important;
    width: 100% !important;
    padding: 64px 0 !important;
    margin: 56px 0 !important;
    border-top: 1px solid #f1f5f9 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    box-sizing: border-box !important;
}

.b44-trust-container {
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
}

.b44-trust-header {
    text-align: center !important;
    margin-bottom: 48px !important;
    padding: 0 16px !important;
}

.b44-trust-subtitle {
    font-size: 12px !important;
    font-weight: 800 !important;
    color: #e07b1a !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    display: inline-block !important;
    margin-bottom: 8px !important;
}

.b44-trust-title {
    font-size: 32px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    letter-spacing: -0.02em !important;
    margin: 0 0 12px 0 !important;
}

.b44-trust-desc {
    font-size: 16px !important;
    color: #4b5563 !important;
    margin: 0 !important;
}

/* User specified slider container structure */
.b44-reviews-slider {
    position: relative !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 0 72px !important;
    box-sizing: border-box !important;
}

.b44-reviews-viewport {
    overflow: hidden !important;
    width: 100% !important;
}

.b44-reviews-track {
    display: flex !important;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change: transform !important;
    width: 100% !important;
}

.b44-review-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
    box-sizing: border-box !important;
}

/* Review Card Styling with original premium look and hover effect */
.b44-review-card {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    min-height: 200px !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.b44-review-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.04) !important;
}

/* Internal Card Styles from original premium block */
.b44-trust-card-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    width: 100% !important;
}

.b44-trust-profile {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.b44-trust-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: #374151 !important;
    color: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 700 !important;
    font-size: 14px !important;
}

.b44-trust-user-meta {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

.b44-trust-username {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    line-height: 1.2 !important;
}

.b44-trust-date {
    font-size: 11px !important;
    color: #9ca3af !important;
    margin-top: 2px !important;
}

/* Badges */
.b44-trust-badge {
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 9999px !important;
    color: #ffffff !important;
    text-transform: capitalize !important;
}

.badge-trustpilot {
    background: #00b67a !important;
}

.badge-google {
    background: #4285f4 !important;
}

.badge-ebay {
    background: #e53238 !important;
}

/* Stars */
.b44-trust-stars {
    display: flex !important;
    gap: 4px !important;
    color: #fbbf24 !important;
    font-size: 12px !important;
    margin-bottom: 12px !important;
    text-align: left !important;
}

.b44-trust-card-text {
    font-size: 13px !important;
    color: #4b5563 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
    text-align: left !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex-grow: 1 !important;
}

/* Arrow Navigation Buttons - User Specified */
.b44-review-arrow {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 50% !important;
    width: 44px !important;
    height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #4b5563 !important;
    font-size: 14px !important;
    cursor: pointer !important;
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
    padding: 0 !important;
}

.b44-review-arrow:hover {
    background: #f8fafc !important;
    color: #e07b1a !important;
    border-color: #cbd5e1 !important;
}

.b44-review-arrow.prev {
    left: 16px !important;
}

.b44-review-arrow.next {
    right: 16px !important;
}

/* Dots Navigation */
.b44-trust-dots {
    display: flex !important;
    justify-content: center !important;
    gap: 8px !important;
    margin-top: 32px !important;
    width: 100% !important;
}

.b44-trust-dot {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #cbd5e1 !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

.b44-trust-dot.active {
    background: #e07b1a !important;
    width: 24px !important;
    border-radius: 4px !important;
}

/* Spacing between Product Sliders and Trust Section */
.product-slider-NeuImSortiment {
    margin-bottom: 0 !important;
}

.product-slider-TopAngebot {
    margin-top: 0 !important;
}

/* User specified Responsive Layouts */
@media (max-width: 991px) {
    .b44-reviews-slider {
        padding: 0 56px !important;
    }
    
    .b44-review-slide {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
    
    .b44-review-arrow {
        width: 40px !important;
        height: 40px !important;
    }
    
    .b44-review-arrow.prev {
        left: 8px !important;
    }
    
    .b44-review-arrow.next {
        right: 8px !important;
    }
}

@media (max-width: 575px) {
    .b44-reviews-slider {
        padding: 0 44px !important;
    }
    
    .b44-review-slide {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    
    .b44-review-arrow {
        display: none !important;
    }
}

/* Mehr Abstand nach letzter Produktsektion vor Stats/Footer */
.product-slider-wrapper:last-of-type,
.b44-product-section:last-of-type {
    margin-bottom: 80px !important;
}

.product-slider-wrapper:last-of-type + .b44-stats-section,
.b44-product-section:last-of-type + .b44-stats-section {
    margin-top: 80px !important;
}

@media (max-width: 991px) {
    .product-slider-wrapper:last-of-type,
    .b44-product-section:last-of-type {
        margin-bottom: 64px !important;
    }
    .product-slider-wrapper:last-of-type + .b44-stats-section,
    .b44-product-section:last-of-type + .b44-stats-section {
        margin-top: 64px !important;
    }
}

@media (max-width: 575px) {
    .product-slider-wrapper:last-of-type,
    .b44-product-section:last-of-type {
        margin-bottom: 48px !important;
    }
    .product-slider-wrapper:last-of-type + .b44-stats-section,
    .b44-product-section:last-of-type + .b44-stats-section {
        margin-top: 48px !important;
    }
}

/* =========================================================
   FONT-DISPLAY: SWAP OVERRIDES FOR PAGESPEED
   ========================================================= */
@font-face {
  font-family: "Font Awesome 5 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/templates/md_it_hightech/themes/base/fontawesome/webfonts/fa-brands-400.woff2") format("woff2"), 
       url("/templates/md_it_hightech/themes/base/fontawesome/webfonts/fa-brands-400.woff") format("woff"), 
       url("/templates/md_it_hightech/themes/base/fontawesome/webfonts/fa-brands-400.ttf") format("truetype");
}
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/templates/md_it_hightech/themes/base/fontawesome/webfonts/fa-regular-400.woff2") format("woff2"), 
       url("/templates/md_it_hightech/themes/base/fontawesome/webfonts/fa-regular-400.woff") format("woff"), 
       url("/templates/md_it_hightech/themes/base/fontawesome/webfonts/fa-regular-400.ttf") format("truetype");
}
@font-face {
  font-family: "Font Awesome 5 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/templates/md_it_hightech/themes/base/fontawesome/webfonts/fa-solid-900.woff2") format("woff2"), 
       url("/templates/md_it_hightech/themes/base/fontawesome/webfonts/fa-solid-900.woff") format("woff"), 
       url("/templates/md_it_hightech/themes/base/fontawesome/webfonts/fa-solid-900.ttf") format("truetype");
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("OpenSans-Regular"), local("OpenSans-Regular"), url("/templates/md_it_hightech/themes/base/fonts/opensans/open-sans-regular.woff2") format("woff2"), url("/templates/md_it_hightech/themes/base/fonts/opensans/open-sans-regular.woff") format("woff"), url("/templates/md_it_hightech/themes/base/fonts/opensans/open-sans-regular.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  src: local("OpenSans-Semibold"), local("OpenSans-Semibold"), url("/templates/md_it_hightech/themes/base/fonts/opensans/open-sans-600.woff2") format("woff2"), url("/templates/md_it_hightech/themes/base/fonts/opensans/open-sans-600.woff") format("woff"), url("/templates/md_it_hightech/themes/base/fonts/opensans/open-sans-600.ttf") format("truetype");
  font-display: swap;
}

/* LCP Optimierung für das Consent-Banner */
#consent-manager:not(.mini) {
    display: block !important;
}

#consent-banner {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1050 !important;
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
}

.consent-banner-body {
    padding: 1rem !important;
}

.consent-banner-description p {
    font-size: 13px !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.4 !important;
}

.consent-btn-helper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

.consent-btn-helper > div {
    flex: 1 1 auto !important;
}
@font-face {
}

/* =========================================================
   KATEGORIEN STRUKTURSEITE CSS (MCTRADE24 COLUMN-GRID)
   ========================================================= */
.b44-kategoriestruktur {
    font-family: "Open Sans", sans-serif;
    color: #334155 !important;
    max-width: 1340px !important;
    margin: 20px auto 60px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Breadcrumb Scoping for this page */
.breadcrumb-wrapper a,
.breadcrumb-container a,
.breadcrumb a,
#breadcrumb a,
nav[aria-label="breadcrumb"] a,
.breadcrumb-item a,
.breadcrumbs a {
    color: #64748b !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}
.breadcrumb-wrapper a:hover,
.breadcrumb-container a:hover,
.breadcrumb a:hover,
#breadcrumb a:hover,
nav[aria-label="breadcrumb"] a:hover,
.breadcrumb-item a:hover,
.breadcrumbs a:hover {
    color: #e07b1a !important;
    text-decoration: none !important;
}
.breadcrumb-item.active,
.breadcrumb-item.active a {
    color: #94a3b8 !important;
}

/* Hero / Header Card */
.b44-ks-header {
    text-align: center !important;
    margin-bottom: 24px !important;
    padding: 24px 16px !important;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%) !important;
    border-radius: 8px !important;
    border: 1px solid #e2e8f0 !important;
    display: block !important;
}

.b44-ks-header h1 {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
    font-size: 26px !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.02em !important;
}

.b44-ks-header p {
    font-size: 14px !important;
    color: #64748b !important;
    max-width: 680px !important;
    margin: 0 auto !important;
    line-height: 1.5 !important;
}

/* Quick Navigation */
.b44-ks-quicknav {
    display: flex !important;
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    gap: 8px !important;
    padding: 0 !important;
    margin-bottom: 30px !important;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
}

.b44-ks-quicknav a {
    flex: 0 0 auto !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border: 1px solid #cbd5e1 !important;
}

.b44-ks-quicknav a:hover {
    background: #e07b1a !important;
    color: #ffffff !important;
    border-color: #e07b1a !important;
    box-shadow: 0 2px 4px rgba(224, 123, 26, 0.2) !important;
}

.b44-ks-quicknav a.b44-ks-sale-badge {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fca5a5 !important;
}

.b44-ks-quicknav a.b44-ks-sale-badge:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

/* Main Layout - 3 Flex Columns on Desktop */
.b44-ks-main {
    display: flex !important;
    flex-direction: row !important;
    gap: 24px !important;
    align-items: start !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.b44-ks-col {
    flex: 1 1 33.333% !important;
    width: 33.333% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    box-sizing: border-box !important;
}

/* Main Category Sections as Cards */
.b44-ks-section {
    background: #ffffff !important;
    border: 1px solid #eef2f6 !important;
    border-radius: 8px !important;
    padding: 24px 20px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.02), 0 1px 3px rgba(15, 23, 42, 0.01) !important;
    box-sizing: border-box !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    scroll-margin-top: 130px !important;
    width: 100% !important;
    display: block !important;
}

.b44-ks-section:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.05), 0 2px 6px rgba(15, 23, 42, 0.02) !important;
    border-color: #e2e8f0 !important;
}

/* Section Header (Main Category Title) */
.b44-ks-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    margin-bottom: 18px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #f1f5f9 !important;
    border-left: 4px solid #e07b1a !important;
    padding-left: 10px !important;
}

.b44-ks-section-header h2 {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    color: #0f172a !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
}

.b44-ks-btn-all {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #e07b1a !important;
    text-decoration: none !important;
    transition: transform 0.2s ease !important;
    display: inline-block !important;
}

.b44-ks-btn-all:hover {
    color: #c25f0e !important;
    text-decoration: none !important;
    transform: translateX(3px) !important;
}

/* Inner Grid: Flattened to vertical stacked lists with more breathing room */
.b44-ks-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

/* Inner Cards: Flattened (no borders, shadows, backgrounds) */
.b44-ks-card {
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    transition: none !important;
    display: block !important;
}

.b44-ks-card:hover {
    transform: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.b44-ks-card h3 {
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.b44-ks-card h3 a {
    color: #1e293b !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
}

.b44-ks-card h3 a:hover {
    color: #e07b1a !important;
    text-decoration: none !important;
}

/* Sub-lists: Nested items styled clean with bullet points */
.b44-ks-sublist {
    list-style: none !important;
    padding: 0 !important;
    margin: 8px 0 0 10px !important;
    border-top: none !important;
    padding-top: 0 !important;
}

.b44-ks-sublist li {
    margin-bottom: 5px !important;
    position: relative !important;
    padding-left: 10px !important;
}

.b44-ks-sublist li:last-child {
    margin-bottom: 0 !important;
}

.b44-ks-sublist li::before {
    content: "•" !important;
    position: absolute !important;
    left: 0 !important;
    color: #e2e8f0 !important;
    font-size: 10px !important;
    top: -1px !important;
}

.b44-ks-sublist li a {
    font-size: 12px !important;
    color: #64748b !important;
    font-weight: 400 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    display: inline-block !important;
}

.b44-ks-sublist li a:hover {
    color: #e07b1a !important;
    transform: translateX(2px) !important;
    text-decoration: none !important;
}

/* Special Full-Width Sale Section */
.b44-ks-section-sale-full {
    background: #fffafa !important;
    border: 1px solid #fecaca !important;
    border-top: 4px solid #dc2626 !important;
    border-radius: 8px !important;
    padding: 24px !important;
    margin-top: 24px !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.02), 0 1px 3px rgba(220, 38, 38, 0.01) !important;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
    scroll-margin-top: 130px !important;
    box-sizing: border-box !important;
    display: block !important;
    width: 100% !important;
}

.b44-ks-section-sale-full:hover {
    transform: translateY(-3px) !important;
    box-shadow: 0 12px 24px rgba(220, 38, 38, 0.06), 0 2px 6px rgba(220, 38, 38, 0.03) !important;
    border-color: #fca5a5 !important;
}

.b44-ks-section-sale-full-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 20px !important;
    padding-bottom: 8px !important;
    border-bottom: 2px solid #fee2e2 !important;
    border-left: 4px solid #dc2626 !important;
    padding-left: 10px !important;
}

.b44-ks-section-sale-full-header h2 {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    color: #dc2626 !important;
    margin: 0 !important;
    letter-spacing: -0.01em !important;
}

.b44-ks-section-sale-full-content {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.b44-ks-sale-pills {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

.b44-ks-sale-pill {
    background: #ffffff !important;
    border: 1px solid #fca5a5 !important;
    color: #dc2626 !important;
    padding: 8px 20px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
}

.b44-ks-sale-pill:hover {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
    box-shadow: 0 4px 10px rgba(220, 38, 38, 0.15) !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
}

.b44-ks-btn-sale-all {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: #dc2626 !important;
    text-decoration: none !important;
    transition: transform 0.2s ease !important;
    display: inline-block !important;
}

.b44-ks-btn-sale-all:hover {
    color: #b91c1c !important;
    text-decoration: none !important;
    transform: translateX(3px) !important;
}

/* Responsive Overrides */
@media (max-width: 1024px) {
    .b44-ks-main {
        gap: 16px !important;
    }
    .b44-ks-col {
        gap: 16px !important;
    }
}

@media (max-width: 768px) {
    .b44-kategoriestruktur {
        margin: 15px auto 35px !important;
    }
    .b44-ks-header {
        margin-bottom: 16px !important;
        text-align: left !important;
        padding: 16px 12px !important;
    }
    .b44-ks-header h1 {
        font-size: 22px !important;
    }
    .b44-ks-header p {
        font-size: 13px !important;
    }
    .b44-ks-quicknav {
        margin-bottom: 20px !important;
        padding: 10px 12px !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        background: #f8fafc !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 40px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }
    .b44-ks-quicknav::-webkit-scrollbar {
        display: none !important;
    }
    .b44-ks-main {
        flex-direction: column !important;
        gap: 16px !important;
    }
    .b44-ks-col {
        flex: 1 1 100% !important;
        width: 100% !important;
        gap: 14px !important;
    }
    .b44-ks-section {
        padding: 20px 16px !important;
        scroll-margin-top: 100px !important;
    }
    .b44-ks-section-header {
        padding-left: 8px !important;
    }
    .b44-ks-section-header h2 {
        font-size: 14px !important;
    }
    .b44-ks-section-sale-full {
        padding: 20px 16px !important;
        margin-top: 16px !important;
        scroll-margin-top: 100px !important;
    }
    .b44-ks-section-sale-full-header {
        padding-left: 8px !important;
    }
    .b44-ks-section-sale-full-header h2 {
        font-size: 16px !important;
    }
    .b44-ks-section-sale-full-content {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 20px !important;
    }
    .b44-ks-sale-pills {
        justify-content: flex-start !important;
        width: 100% !important;
    }
    .b44-ks-sale-pill {
        flex: 1 1 auto !important;
        text-align: center !important;
    }
    .b44-ks-btn-sale-all {
        text-align: right !important;
        width: 100% !important;
    }
}

/* =========================================================
   MODERNISIERTE KATEGORIESEITEN CSS (TEST-CHILD)
   ========================================================= */

/* Subcategory Section Header */
.b44-subcat-section {
    margin-bottom: 30px !important;
    width: 100% !important;
}

.b44-subcat-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
    width: 100% !important;
}

.b44-subcat-header-row h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748b !important;
    margin: 0 !important;
}

/* Modern Card Grid */
.b44-subcat-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

/* White Category Card */
.b44-subcat-card {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.01) !important;
    box-sizing: border-box !important;
}

.b44-subcat-card:hover {
    transform: translateY(-2px) !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.04) !important;
    text-decoration: none !important;
}

.b44-subcat-card-icon {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #fff7ed !important;
    color: #e07b1a !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 11px !important;
    transition: all 0.2s ease !important;
}

.b44-subcat-card-img {
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
}

.b44-subcat-card-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.2s ease !important;
}

.b44-subcat-card:hover .b44-subcat-card-img img {
    transform: scale(1.08) !important;
}

.b44-subcat-card:hover .b44-subcat-card-icon {
    background: #e07b1a !important;
    color: #ffffff !important;
    transform: scale(1.05) !important;
}

.b44-subcat-card-name {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.3 !important;
}

.b44-subcat-viewall {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #e07b1a !important;
    text-decoration: none !important;
    transition: transform 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.b44-subcat-viewall:hover {
    color: #c25f0e !important;
    transform: translateX(3px) !important;
    text-decoration: none !important;
}

/* Category Title & Product Section Header */
.b44-productlist-title-wrap {
    margin: 40px 0 20px 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid #e2e8f0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
}

.b44-productlist-title-wrap h2 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    color: #0f172a !important;
    margin: 0 !important;
}

/* SEO Description Box at Bottom */
.b44-cat-seo-desc {
    margin-top: 48px !important;
    margin-bottom: 30px !important;
    padding: 24px 28px !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    color: #475569 !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.b44-cat-seo-desc h2, .b44-cat-seo-desc h3 {
    font-family: 'Montserrat', sans-serif !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
}

.b44-cat-seo-desc p {
    margin-bottom: 14px !important;
}

.b44-cat-seo-desc p:last-child {
    margin-bottom: 0 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .b44-subcat-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important;
        gap: 12px !important;
    }
    .b44-subcat-card {
        padding: 12px 14px !important;
        gap: 8px !important;
    }
    .b44-subcat-card-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 9px !important;
    }
    .b44-subcat-card-name {
        font-size: 12px !important;
    }
    .b44-productlist-title-wrap h2 {
        font-size: 16px !important;
    }
    .b44-cat-seo-desc {
        padding: 16px 20px !important;
        font-size: 13px !important;
    }
}

/* Space between adjacent product sections on category pages */
.b44-product-section + .b44-product-section {
    margin-top: 60px !important;
}

/* ========== CATEGORY/LISTING RULES DISABLED - RÜCKBAU ========== 
/* Modern grid layout for category product listing */
#product-list.layout-gallery {
  display: grid !important;
  gap: 28px !important;
}

#product-list.layout-gallery::before,
#product-list.layout-gallery::after {
  display: none !important;
}

#product-list.layout-gallery .product-wrapper {
  width: auto !important;
  max-width: none !important;
  flex: none !important;
  margin-bottom: 0 !important;
  padding: 0 !important;
}

/* 1. Mobile viewports (max-width: 767.98px): ALWAYS 1 column */
@media (max-width: 767.98px) {
  #product-list.layout-gallery {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 16px !important;
  }
}

/* 2. Tablet viewports (768px to 991.98px): ALWAYS 2 columns */
@media (min-width: 768px) and (max-width: 991.98px) {
  #product-list.layout-gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }
}

/* 3. Desktop viewports (min-width: 992px) */
@media (min-width: 992px) {
  /* Default Desktop Layout (4 columns when no sidebar is present) */
  #product-list.layout-gallery {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 28px !important;
  }

  /* Overridden Layout (3 columns when Left Sidebar / Filter is present) */
  .has-left-sidebar #product-list.layout-gallery {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
  }
}

/* ==========================================================================
   PREMIUM SIDEBAR FILTER CARD (Base44 Style)
   ========================================================================== */

/* Left Sidebar Container styled as a single premium white card */
#sidepanel_left.sidepanel-left {
  background: #ffffff !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.02), 0 8px 10px -6px rgba(15, 23, 42, 0.03) !important;
  padding: 24px !important;
  margin-bottom: 40px !important;
  margin-top: 0 !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Dynamic header "FILTER" prepended on the left sidebar */
#sidepanel_left.sidepanel-left::before {
  content: "FILTER" !important;
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  letter-spacing: 0.12em !important;
  color: #0f172a !important;
  margin-bottom: 22px !important;
  padding-bottom: 12px !important;
  border-bottom: 2px solid #f1f5f9 !important;
}

/* Hide unwanted category navigation box in left sidebar on category pages */
#sidepanel_left.sidepanel-left .box-categories,
#sidepanel_left.sidepanel-left .box-linkgroup {
  display: none !important;
}

/* Filter Box Containers styling reset */
#sidepanel_left.sidepanel-left .box {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 0 20px 0 !important;
}

/* Divider rules between filter groups */
#sidepanel_left.sidepanel-left .box-filter-hr,
#sidepanel_left.sidepanel-left hr {
  border-top: 1px solid #f1f5f9 !important;
  margin: 20px 0 0 0 !important;
}

/* Collapsible Filter Toggle Buttons (Headers) */
#sidepanel_left.sidepanel-left .btn-filter-box.dropdown-toggle {
  padding: 10px 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  text-align: left !important;
  width: 100% !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  text-decoration: none !important;
}

#sidepanel_left.sidepanel-left .btn-filter-box.dropdown-toggle::after {
  content: "\f078" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  border: none !important;
  font-size: 11px !important;
  color: #64748b !important;
  transition: transform 0.2s ease !important;
}

#sidepanel_left.sidepanel-left .btn-filter-box.dropdown-toggle[aria-expanded="true"]::after {
  transform: rotate(180deg) !important;
}

/* Checkbox Option Links (.filter-item) */
#sidepanel_left.sidepanel-left .filter-item {
  display: flex !important;
  align-items: center !important;
  padding: 8px 0 !important;
  color: #475569 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

#sidepanel_left.sidepanel-left .filter-item:hover {
  color: #e07b1a !important;
}

/* Checkbox Icons styling */
#sidepanel_left.sidepanel-left .filter-item .snippets-filter-item-icon-right {
  font-size: 16px !important;
  margin-right: 10px !important;
  color: #cbd5e1 !important;
  order: -1 !important; /* Forces checkbox to render on the left */
}

/* Checked Checkbox Icon styling */
#sidepanel_left.sidepanel-left .filter-item.active {
  color: #e07b1a !important;
  font-weight: 600 !important;
}

#sidepanel_left.sidepanel-left .filter-item.active .snippets-filter-item-icon-right {
  color: #e07b1a !important;
}

/* Item Count Badges inside checkboxes */
#sidepanel_left.sidepanel-left .filter-item .badge {
  background: #f8fafc !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 9999px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  margin-left: auto !important;
}

#sidepanel_left.sidepanel-left .filter-item:hover .badge {
  border-color: #cbd5e1 !important;
  background: #f1f5f9 !important;
}

/* Active / Reset Filters Box Styling */
#sidepanel_left.sidepanel-left .box-active-filters,
#sidepanel_left.sidepanel-left .box-filter-active {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

#sidepanel_left.sidepanel-left a.btn-link.filter-reset,
#sidepanel_left.sidepanel-left a[href*="?"]:not(.filter-item):not(.dropdown-item) {
  color: #e07b1a !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  margin-top: 10px !important;
  padding: 0 !important;
}

#sidepanel_left.sidepanel-left a.btn-link.filter-reset:hover {
  color: #b85c0f !important;
  text-decoration: underline !important;
}

/* Price Range Slider Modern Styling */
#sidepanel_left.sidepanel-left .price-range-inputs {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 15px !important;
  margin-bottom: 20px !important;
}

#sidepanel_left.sidepanel-left .price-range-inputs .col {
  flex: 1 !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
}

#sidepanel_left.sidepanel-left .price-range-input {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  height: 38px !important;
  padding: 8px 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  box-shadow: none !important;
  width: 100% !important;
  transition: all 0.2s ease !important;
}

#sidepanel_left.sidepanel-left .price-range-input:focus {
  border-color: #e07b1a !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(224, 123, 26, 0.12) !important;
  outline: none !important;
}

#sidepanel_left.sidepanel-left .price-range-inputs .input-group-addon {
  display: none !important; /* Hide currency label next to inputs for cleaner look */
}

/* JQuery UI Price Slider Line styling */
#sidepanel_left.sidepanel-left .price-range-slide {
  height: 5px !important;
  background: #f1f5f9 !important;
  border: none !important;
  border-radius: 9999px !important;
  margin: 15px 8px !important;
  box-shadow: none !important;
  position: relative !important;
}

/* JQuery UI selected range color */
#sidepanel_left.sidepanel-left .price-range-slide .ui-slider-range {
  background: #e07b1a !important;
  position: absolute !important;
  height: 100% !important;
  border-radius: 9999px !important;
}

/* JQuery UI Drag Handles */
#sidepanel_left.sidepanel-left .price-range-slide .ui-slider-handle {
  width: 16px !important;
  height: 16px !important;
  background: #ffffff !important;
  border: 2px solid #e07b1a !important;
  border-radius: 50% !important;
  top: -5px !important;
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1) !important;
  cursor: pointer !important;
  outline: none !important;
  position: absolute !important;
  margin-left: -8px !important;
  transition: transform 0.1s ease, box-shadow 0.1s ease !important;
}

#sidepanel_left.sidepanel-left .price-range-slide .ui-slider-handle:hover,
#sidepanel_left.sidepanel-left .price-range-slide .ui-slider-handle:focus {
  transform: scale(1.15) !important;
  box-shadow: 0 4px 8px rgba(15, 23, 42, 0.15), 0 0 0 4px rgba(224, 123, 26, 0.1) !important;
}

/* ==========================================================================
   DESKTOP TWO-COLUMN FILTER LAYOUT (Base44 Grid Integration)
   ========================================================================== */
@media (min-width: 992px) {
  /* Force main content row to behave as side-by-side flex layout with no wrapping */
  #content > .row.justify-content-lg-end {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 28px !important; /* Distance from title section to grid */
    gap: 20px !important; /* Spacing between Filter Column and Product Column */
  }

  /* Left Column: Filter Sidebar */
  #sidepanel_left.sidepanel-left {
    flex: 0 0 200px !important;
    width: 200px !important;
    max-width: 200px !important;
    order: 1 !important; /* First item in flex container */
    margin-right: 0 !important;
    margin-left: 0 !important;
    margin-top: 38px !important; /* Pushed down 38px to align precisely with the sorting selection */
    display: block !important;
    
    /* Base44 Filter Card styling - Small, quiet, no shadow */
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 16px !important;
    margin-bottom: 40px !important;
    position: relative !important;
    z-index: 10 !important;
  }

  /* Right Column: Sort bar & Product Grid */
  #content > .row.justify-content-lg-end > .col-lg-8.col-xl-9.ml-auto-util {
    flex: 1 1 0% !important;
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important; /* Overwrite margin-left: auto */
    order: 2 !important; /* Second item in flex container */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Base44 Filter Header styling */
#sidepanel_left.sidepanel-left::before {
  content: "FILTER" !important;
  display: block !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 0.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  color: #0f172a !important;
  margin-bottom: 16px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}

/* Turn collapsible box headers into static headers */
#sidepanel_left.sidepanel-left .btn-filter-box.dropdown-toggle {
  pointer-events: none !important;
  cursor: default !important;
  padding: 0 0 10px 0 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  display: block !important;
  width: 100% !important;
  text-align: left !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#sidepanel_left.sidepanel-left .btn-filter-box.dropdown-toggle::after {
  display: none !important; /* Hide arrow icons */
}

/* Force filter sections to remain open (never collapse) */
#sidepanel_left.sidepanel-left .collapse {
  display: block !important;
  height: auto !important;
  visibility: visible !important;
}

/* Hide JTL price filter default header since our custom title replaces it */
#sidepanel_left.sidepanel-left .box-filter-price .btn-filter-box {
  display: none !important;
}

/* Hide active filters above the products grid */
.active-filters {
  display: none !important;
}

/* Base44 Custom Price Slider Header */
.b44-dynamic-price-title {
  font-family: 'Inter', sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  color: #1e293b !important;
  margin-bottom: 12px !important;
}

/* Base44 Price Values below slider */
.b44-price-slider-values {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-top: 10px !important;
  margin-bottom: 4px !important;
}

.b44-price-val-min,
.b44-price-val-max {
  font-size: 0.75rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
}

/* JQuery UI Price Slider Line (Base44 style: thin gray track, black handle) */
#sidepanel_left.sidepanel-left .price-range-slide {
  height: 4px !important;
  background: #e2e8f0 !important;
  border: none !important;
  border-radius: 9999px !important;
  margin: 16px 6px 12px 6px !important;
  box-shadow: none !important;
  position: relative !important;
}

#sidepanel_left.sidepanel-left .price-range-slide .ui-slider-range {
  background: #0f172a !important; /* Dark selection bar */
  position: absolute !important;
  height: 100% !important;
  border-radius: 9999px !important;
}

#sidepanel_left.sidepanel-left .price-range-slide .ui-slider-handle {
  width: 12px !important;
  height: 12px !important;
  background: #0f172a !important; /* Black handle dot */
  border: none !important;
  border-radius: 50% !important;
  top: -4px !important;
  cursor: pointer !important;
  outline: none !important;
  position: absolute !important;
  margin-left: -6px !important;
  box-shadow: none !important;
  transition: transform 0.1s ease !important;
}

#sidepanel_left.sidepanel-left .price-range-slide .ui-slider-handle:hover,
#sidepanel_left.sidepanel-left .price-range-slide .ui-slider-handle:focus {
  transform: scale(1.2) !important;
}

/* Style Reset Filter Button (Base44 style: compact button with orange border) */
#sidepanel_left .b44-reset-filter-container {
  margin-top: 16px !important;
  padding-top: 12px !important;
  border-top: 1px solid #f1f5f9 !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#sidepanel_left .snippets-filter-item-all {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 36px !important;
  background: #fff7ed !important;
  color: #ea580c !important;
  border: 1px solid #f97316 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 0.8rem !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  transition: all 0.15s ease-in-out !important;
  cursor: pointer !important;
  text-align: center !important;
}

#sidepanel_left .snippets-filter-item-all:hover {
  background: #ffedd5 !important;
  color: #c2410c !important;
  border-color: #ea580c !important;
  text-decoration: none !important;
}

#sidepanel_left .snippets-filter-item-all .reset-icon {
  font-size: 1rem !important;
  margin-right: 6px !important;
  line-height: 1 !important;
}

/* Modern Breadcrumbs */
.breadcrumb {
  font-size: 0.725rem !important; /* extra small and dezent */
  padding: 0 !important;
  background: transparent !important;
  margin-bottom: 8px !important;
}

.breadcrumb-item {
  color: #64748b !important;
}

.breadcrumb-item a {
  color: #64748b !important;
  font-weight: 500 !important;
}

.breadcrumb-item a:hover {
  color: #ea580c !important;
  text-decoration: none !important;
}

.breadcrumb-item + .breadcrumb-item::before {
  color: #cbd5e1 !important;
  content: "/" !important;
  padding: 0 8px !important;
}

/* Modern Category Header & Article Count */
.productlist-header .title {
  margin-bottom: 28px !important; /* distance titlebereich to toolbar: 24px - 32px */
}

.productlist-header .title h1 {
  font-size: 2.25rem !important; /* larger and bolder */
  font-weight: 800 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 2px !important;
  line-height: 1.2 !important;
}

.b44-title-product-count-wrap {
  display: block !important;
  margin-top: 2px !important;
  margin-bottom: 0 !important;
}

.b44-title-product-count {
  font-size: 0.85rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
}

/* Modern Compact Toolbar / Pagination Control bar */
.productlist-page-nav {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 0 12px 0 !important; /* thin line, minimal padding */
  border-top: none !important;
  border-bottom: 1px solid #f1f5f9 !important; /* very quiet thin underline */
  margin-bottom: 16px !important;
  margin-top: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.productlist-page-nav-bottom,
.productlist-page-nav-top {
  display: none !important;
}

/* Hide limit option dropdown (products per page) and page counter to clean up toolbar */
.productlist-page-nav .filter-type-FilterItemLimits,
.productlist-page-nav .productlist-item-info {
  display: none !important;
}

/* Flex layout spacing inside toolbar */
.productlist-page-nav > .row {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin: 0 !important;
}

.productlist-page-nav .displayoptions {
  flex: 1 1 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* Layout selection buttons container aligned right */
.productlist-page-nav .layout-options {
  margin-left: auto !important;
  order: 3 !important;
}

.productlist-page-nav .dropdown-toggle {
  background: #f8fafc !important;
  color: #475569 !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 6px !important;
  font-weight: 500 !important;
  font-size: 0.8rem !important;
  padding: 6px 12px !important;
  transition: all 0.2s ease-in-out !important;
  box-shadow: none !important;
}

.productlist-page-nav .dropdown-toggle:hover,
.productlist-page-nav .dropdown-toggle:focus {
  background: #f1f5f9 !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
}

.productlist-page-nav .layout-options .btn {
  background: #ffffff !important;
  color: #64748b !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  transition: all 0.2s ease-in-out !important;
  margin-left: 4px !important;
}

.productlist-page-nav .layout-options .btn:hover {
  background: #f8fafc !important;
  color: #0f172a !important;
}

.productlist-page-nav .layout-options .btn.active {
  background: #fff7ed !important;
  color: #ea580c !important;
  border-color: #fed7aa !important;
}

/* Premium Compact Product Cards Grid */
.product-list.row {
  margin-left: -8px !important;
  margin-right: -8px !important;
  display: flex !important;
  flex-wrap: wrap !important;
}

.product-list.row > .product-wrapper {
  padding-left: 8px !important;
  padding-right: 8px !important;
  margin-bottom: 16px !important;
}

.productbox {
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 10px !important; /* Reduced padding for compactness */
  background: #ffffff !important;
  box-shadow: none !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important; /* For absolute badges & wishlist positioning */
  transition: border-color 0.2s ease, transform 0.2s ease !important;
}

.productbox:hover {
  border-color: #cbd5e1 !important;
  transform: translateY(-2px) !important;
}

/* Badges (Ribbons) in top left corner */
.productbox .ribbon {
  position: absolute !important;
  top: 16px !important;
  left: 16px !important;
  z-index: 5 !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  text-transform: uppercase !important;
}

.productbox .ribbon-sofort,
.productbox .ribbon-neu,
.productbox .badge-success {
  background: #10b981 !important; /* clean green like Bild 2 */
  color: #ffffff !important;
}

/* Wishlist circular button in top right corner */
.productbox .btn-wishlist,
.productbox .wishlist-button,
.productbox .wishlist-action {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 5 !important;
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 2px 4px rgba(0,0,0,0.04) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  color: #94a3b8 !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.productbox .btn-wishlist:hover,
.productbox .wishlist-button:hover {
  color: #ea580c !important;
  border-color: #fed7aa !important;
  transform: scale(1.05) !important;
}

/* Base44 Compact Product Image Section with gray background and fixed height */
.productbox-images,
.productbox-image {
  height: 180px !important; /* Reduced height for compactness */
  min-height: 180px !important;
  max-height: 180px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #f8fafc !important; /* Soft gray image container */
  border-radius: 8px !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
  padding: 8px !important;
}

.productbox-images img,
.productbox-image img {
  max-height: 100% !important;
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Compact Typography and price settings */
.productbox-meta {
  font-size: 0.725rem !important;
  color: #ea580c !important; /* category orange small */
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important;
}

.productbox-title {
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin-bottom: 4px !important;
  line-height: 1.3 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  height: 2.6em !important;
}

.productbox-price {
  font-size: 1.05rem !important; /* price bold and kräftig */
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-top: auto !important; /* Push price to bottom of card */
}

/* Tax info / zzgl. Versand should be tiny and quiet */
.productbox .price-note,
.productbox .shipping-note {
  font-size: 0.675rem !important;
  color: #94a3b8 !important;
  margin-top: 1px !important;
}

/* ==========================================================================
   DESKTOP HORIZONTAL LIST VIEW (Base44 List Integration)
   ========================================================================== */
@media (min-width: 768px) {
  .product-list.layout-list .product-wrapper {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .product-list.layout-list .b44-product-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 12px !important;
    gap: 20px !important;
    height: 180px !important;
    min-height: 180px !important;
    max-height: 180px !important;
    position: relative !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transform: none !important;
  }

  .product-list.layout-list .b44-product-card:hover {
    transform: none !important;
    box-shadow: 0 4px 12px rgba(15,23,42,.06) !important;
    border-color: #e2e8f0 !important;
  }

  /* Image Area left-aligned with gray background */
  .product-list.layout-list .b44-product-image-area {
    flex: 0 0 160px !important;
    width: 160px !important;
    height: 156px !important;
    min-height: 156px !important;
    max-height: 156px !important;
    background: #f8fafc !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 6px !important;
    box-sizing: border-box !important;
  }

  .product-list.layout-list .b44-product-image-area .b44-product-card-link {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    padding: 0 !important;
  }

  .product-list.layout-list .b44-product-image-area img,
  .product-list.layout-list .b44-product-image-area .b44-product-image {
    max-height: 90% !important;
    max-width: 90% !important;
    object-fit: contain !important;
    width: auto !important;
    height: auto !important;
  }

  /* Information Area right-aligned */
  .product-list.layout-list .b44-product-card-body {
    flex: 1 1 0% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    height: 100% !important;
    padding: 0 40px 0 0 !important; /* Spacing for the wishlist button */
    box-sizing: border-box !important;
  }

  /* Layout alignment inside body */
  .product-list.layout-list .b44-product-category {
    font-size: 0.725rem !important;
    color: #ea580c !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    margin-bottom: 2px !important;
    display: inline-block !important;
  }

  .product-list.layout-list .b44-product-title {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 6px !important;
    line-height: 1.3 !important;
    height: auto !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .product-list.layout-list .b44-product-rating {
    margin-bottom: 8px !important;
    display: flex !important;
    gap: 2px !important;
  }

  .product-list.layout-list .b44-product-price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin-bottom: 2px !important;
  }

  .product-list.layout-list .b44-product-price {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
  }

  .product-list.layout-list .b44-product-old-price {
    font-size: 0.85rem !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
  }

  .product-list.layout-list .b44-product-tax-info {
    font-size: 0.675rem !important;
    color: #94a3b8 !important;
    display: block !important;
  }

  /* Badges in the top-left corner of the image area */
  .product-list.layout-list .b44-product-badges {
    position: absolute !important;
    top: 6px !important;
    left: 6px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    z-index: 5 !important;
  }

  .product-list.layout-list .b44-badge {
    font-size: 0.55rem !important;
    font-weight: 700 !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    text-transform: uppercase !important;
    min-width: unset !important;
    height: auto !important;
  }

  /* Wishlist Heart button absolute positioned on the top right of the whole card */
  .product-list.layout-list .b44-product-wishlist {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    z-index: 5 !important;
    display: block !important;
  }

  .product-list.layout-list .b44-wishlist-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #94a3b8 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  .product-list.layout-list .b44-wishlist-btn:hover {
    color: #ea580c !important;
    border-color: #fed7aa !important;
    transform: scale(1.05) !important;
  }

  /* Hide hover details overlay for list view */
  .product-list.layout-list .b44-product-hover-overlay {
    display: none !important;
  }

  /* List actions area on desktop */
  .product-list.layout-list .b44-product-list-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 0 0 170px !important;
    width: 170px !important;
    justify-content: center !important;
    align-items: center !important;
    border-left: 1px solid #f1f5f9 !important;
    padding-left: 20px !important;
    box-sizing: border-box !important;
  }

  .product-list.layout-list .b44-list-action-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 36px !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    gap: 6px !important;
    border: 1px solid transparent !important;
  }

  /* Warenkorb-Button: Orange */
  .product-list.layout-list .b44-list-action-btn--cart {
    background: #ea580c !important;
    color: #ffffff !important;
  }
  .product-list.layout-list .b44-list-action-btn--cart:hover {
    background: #dd6b20 !important;
  }

  /* Schnellansicht & Vergleichen: Helle/Dezente Buttons */
  .product-list.layout-list .b44-list-action-btn--quickview,
  .product-list.layout-list .b44-list-action-btn--compare {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
  }
  .product-list.layout-list .b44-list-action-btn--quickview:hover,
  .product-list.layout-list .b44-list-action-btn--compare:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
  }
}

/* Default state: Hide list actions in gallery/grid view and all other contexts */
.b44-product-list-actions {
  display: none !important;
}

/* Mobile responsive styling for list layout actions */
@media (max-width: 767px) {
  .product-list.layout-list .b44-product-card {
    height: auto !important;
    min-height: unset !important;
    max-height: unset !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 12px !important;
  }
  .product-list.layout-list .b44-product-image-area {
    width: 100% !important;
    height: 200px !important;
    margin-bottom: 12px !important;
  }
  .product-list.layout-list .b44-product-card-body {
    width: 100% !important;
    padding-right: 0 !important;
    margin-bottom: 12px !important;
  }
  .product-list.layout-list .b44-product-list-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    width: 100% !important;
    border-left: none !important;
    border-top: 1px solid #f1f5f9 !important;
    padding-top: 12px !important;
    padding-left: 0 !important;
  }
  .product-list.layout-list .b44-product-list-actions > * {
    flex: 1 1 30% !important;
    min-width: 100px !important;
  }
  .product-list.layout-list .b44-list-action-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 36px !important;
    border-radius: 8px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    gap: 6px !important;
    border: 1px solid transparent !important;
  }
  
  .product-list.layout-list .b44-list-action-btn--cart {
    background: #ea580c !important;
    color: #ffffff !important;
  }
  .product-list.layout-list .b44-list-action-btn--quickview,
  .product-list.layout-list .b44-list-action-btn--compare {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1px solid #e2e8f0 !important;
  }
}

 ========== END DISABLED CATEGORY RULES ========== */
/* ==========================================================================
   NOVA PRODUCT DETAIL PAGE GALLERY ASPECT RATIO AND SLICK STABILITY RULES
   ========================================================================== */

/* Slick Slider Base Layout (Normally from slick.scss / clear_crit.css) */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list {
  position: relative;
  overflow: hidden;
  display: block;
  margin: 0;
  padding: 0;
}
.slick-list:focus {
  outline: none;
}
.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
.slick-track {
  position: relative;
  left: 0;
  top: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  flex-wrap: nowrap;
}
.slick-track:before,
.slick-track:after {
  content: "";
  display: table;
}
.slick-track:after {
  clear: both;
}
.slick-loading .slick-track {
  visibility: hidden;
}
.slick-slide {
  float: left;
  height: 100%;
  min-height: 1px;
  display: none;
  max-width: 100%;
  width: 100%;
  float: none;
  height: auto;
  padding: 0 1rem;
}
[dir="rtl"] .slick-slide {
  float: right;
}
.slick-slide img {
  display: block;
}
.slick-slide.slick-loading img {
  display: none;
}
.slick-slide.dragging img {
  pointer-events: none;
}
.slick-initialized .slick-slide {
  display: block;
}
.slick-loading .slick-slide {
  visibility: hidden;
}
.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
  display: none;
}

/* Slick slider elements inside PDP image gallery */
.slick-slide .square,
.slick-slide .productbox-image-wrapper {
  display: flex !important;
}

/* Original NOVA Square Aspect Ratio Rules (Normally from _base_crit.scss) */
.square {
  display: flex;
  position: relative;
}
.square::before {
  content: '';
  display: inline-block;
  padding-bottom: 100%;
}

/* Original NOVA Square Image Layout (Normally from components/_figures.scss) */
.square-image {
  position: relative;
  display: flex;
}
.square-image::before {
  content: '';
  display: inline-block;
  padding-bottom: 100%;
}
.square .inner,
.square-image .inner {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.square .inner picture,
.square-image .inner picture {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  left: 0;
  top: 0;
}
.square .inner a,
.square-image .inner a {
  width: 100%;
  height: 100%;
  display: block;
}
.square .inner img,
.square-image .inner img {
  display: block;
  position: relative;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.square .inner img.lazyloading,
.square-image .inner img.lazyloading {
  color: transparent;
  width: auto;
  height: auto;
  max-width: 40px;
  max-height: 40px;
}
.square-inner,
.productbox-image-wrapper-inner {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
}

/* Gallery and Gallery Preview Layout Overrides from clear.css / clear_crit.css */
#image_wrapper {
  margin-bottom: 3rem;
}
#image_wrapper #gallery {
  margin-bottom: 2rem;
}
#image_wrapper #gallery:not(.slick-initialized) {
  padding: 0;
}
#image_wrapper #gallery .slick-slide {
  padding: 0;
}
#image_wrapper #gallery .slick-arrow {
  display: none !important;
  background-color: transparent;
}
#image_wrapper #gallery .slick-arrow:hover {
  background-color: #F8BF00;
}
#image_wrapper.fullscreen #gallery {
  margin-bottom: 0;
}
#image_wrapper.fullscreen #gallery .product-image {
  cursor: pointer;
}
#image_wrapper.fullscreen #gallery .square-image .inner img {
  margin: 0 auto;
  left: initial;
  top: initial;
  -webkit-transform: initial;
  transform: initial;
}
#image_wrapper.fullscreen #gallery .slick-arrow {
  display: block !important;
}
#image_wrapper.fullscreen #gallery_preview_wrapper {
  width: 100%;
  padding: 1rem;
  max-width: 760px;
}
#image_wrapper .product-thumbnails .square-image {
  margin-bottom: 0;
}

/* ==========================================================================
   PDP Layout Modernization (Base44 Styling) - Fine Tuning
   ========================================================================== */

/* 0. Centering the PDP Content Wrapper */
body[data-page="1"] #content-wrapper {
  max-width: 1140px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body[data-page="1"] #result-wrapper > .container {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 1. Desktop 2-column layout */
@media (min-width: 992px) {
  body[data-page="1"] #product-offer {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 32px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  body[data-page="1"] #product-offer > .product-gallery {
    flex: 0 0 calc(52% - 16px) !important;
    max-width: calc(52% - 16px) !important;
    width: calc(52% - 16px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body[data-page="1"] #product-offer > .product-info {
    flex: 0 0 calc(48% - 16px) !important;
    max-width: calc(48% - 16px) !important;
    width: calc(48% - 16px) !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* 2. Main Gallery image card aesthetics & bounds without hard-coded heights on Slick */
body[data-page="1"] #gallery_wrapper {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  max-width: 540px !important; /* Cap outer wrapper width to limit height via 1:1 aspect ratio */
  width: 100% !important;
  margin: 0 auto !important;
  padding: 16px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
}
body[data-page="1"] #gallery .square-image .inner img {
  max-height: 100% !important;
  object-fit: contain !important;
}

/* 3. Compact Thumbnails */
body[data-page="1"] #gallery_preview_wrapper {
  margin-top: 16px !important;
  max-width: 540px !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  max-height: 85px !important;
}
body[data-page="1"] #gallery_preview .square-image {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  max-height: 72px !important;
  margin: 0 auto !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease !important;
}
body[data-page="1"] #gallery_preview .square-image::before {
  display: none !important;
}
body[data-page="1"] #gallery_preview .square-image .inner {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
body[data-page="1"] #gallery_preview .square-image .inner img {
  position: static !important;
  transform: none !important;
  max-width: 100% !important;
  max-height: 100% !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}
body[data-page="1"] #gallery_preview .slick-slide.slick-current .square-image,
body[data-page="1"] #gallery_preview .slick-slide.active .square-image,
body[data-page="1"] #gallery_preview .slick-slide.slick-active .square-image {
  border: 2px solid var(--b44-gold) !important;
}
body[data-page="1"] #gallery_preview .square-image:hover {
  border-color: var(--b44-gold-light) !important;
}

/* 4. Right Product Info formatting */
body[data-page="1"] #product-offer .product-info {
  max-width: 480px !important;
}
body[data-page="1"] #product-offer .product-category {
  font-size: 0.8rem !important;
  color: var(--b44-gold) !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
}
body[data-page="1"] #product-offer .product-category strong {
  display: none !important;
}
body[data-page="1"] #product-offer .product-category a {
  color: var(--b44-gold) !important;
}
body[data-page="1"] #product-offer .product-title {
  font-size: 1.6rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  line-height: 1.25 !important;
  margin-top: 0 !important;
  margin-bottom: 8px !important;
}
body[data-page="1"] #product-offer .rating-wrapper {
  margin-bottom: 12px !important;
  display: flex !important;
  align-items: center !important;
}
body[data-page="1"] #product-offer .shortdesc {
  font-size: 0.95rem !important;
  color: #475569 !important;
  line-height: 1.5 !important;
  margin-bottom: 16px !important;
}

/* Price aesthetics */
body[data-page="1"] #product-offer .price_wrapper {
  margin-bottom: 16px !important;
}
body[data-page="1"] #product-offer .price_wrapper .price {
  font-size: 2rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
  margin-bottom: 2px !important;
}
body[data-page="1"] #product-offer .price-note {
  font-size: 0.8rem !important;
  color: #64748b !important;
}
body[data-page="1"] #product-offer .price-note a.shipment {
  color: var(--b44-gold) !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
}
body[data-page="1"] #product-offer .suggested-price {
  font-size: 0.85rem !important;
  color: #94a3b8 !important;
  margin-top: 6px !important;
}
body[data-page="1"] #product-offer .yousave {
  font-size: 0.85rem !important;
  color: #ef4444 !important;
  font-weight: 600 !important;
}

/* Stock status slate wrapper & green color */
body[data-page="1"] #product-offer .stock-information {
  margin-bottom: 16px !important;
  background: #f8fafc !important;
  padding: 12px 16px !important;
  border-radius: 10px !important;
  border: 1px solid #e2e8f0 !important;
}
body[data-page="1"] #product-offer .delivery-status .status-2 {
  color: #15803d !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}
body[data-page="1"] #product-offer .estimated-delivery {
  font-size: 0.85rem !important;
  color: #64748b !important;
  margin-top: 4px !important;
}
body[data-page="1"] #product-offer .estimated-delivery .a2 {
  font-weight: 600 !important;
  color: #334155 !important;
}

/* Bulk price table compact container */
body[data-page="1"] #product-offer table.table.table-sm.table-hover {
  max-width: 360px !important;
  margin-top: 12px !important;
  margin-bottom: 16px !important;
  font-size: 0.85rem !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}
body[data-page="1"] #product-offer table.table.table-sm.table-hover th,
body[data-page="1"] #product-offer table.table.table-sm.table-hover td {
  padding: 8px 12px !important;
  border-bottom: 1px solid #e2e8f0 !important;
}
body[data-page="1"] #product-offer table.table.table-sm.table-hover tr:last-child td {
  border-bottom: none !important;
}

/* Single line basket form layout */
body[data-page="1"] #product-offer .basket-form-inline {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: stretch !important;
  gap: 12px !important;
  margin-bottom: 16px !important;
}
body[data-page="1"] #product-offer .basket-form-inline > [class*="col-"],
body[data-page="1"] #product-offer .basket-form-inline > .col {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
body[data-page="1"] #product-offer .basket-form-inline > [class*="col-"]:first-child,
body[data-page="1"] #product-offer .basket-form-inline > .col:first-child {
  flex: 0 0 135px !important;
  width: 135px !important;
  max-width: 135px !important;
}
body[data-page="1"] #product-offer .basket-form-inline > [class*="col-"]:last-child,
body[data-page="1"] #product-offer .basket-form-inline > .col:last-child {
  flex: 1 1 auto !important;
}

/* Quantity input group */
body[data-page="1"] #product-offer #quantity-grp {
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  height: 48px !important;
}
body[data-page="1"] #product-offer #quantity-grp .input-group-prepend,
body[data-page="1"] #product-offer #quantity-grp .input-group-append {
  margin: 0 !important;
  display: flex !important;
}
body[data-page="1"] #product-offer #quantity-grp .btn {
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  width: 36px !important;
  height: 46px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  padding: 0 !important;
  transition: background-color 0.2s !important;
}
body[data-page="1"] #product-offer #quantity-grp .btn:hover {
  background-color: #f1f5f9 !important;
}
body[data-page="1"] #product-offer #quantity-grp input.quantity {
  border: none !important;
  text-align: center !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  color: #0f172a !important;
  height: 46px !important;
  padding: 0 !important;
  width: 48px !important;
  background: transparent !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body[data-page="1"] #product-offer #quantity-grp input.quantity::-webkit-outer-spin-button,
body[data-page="1"] #product-offer #quantity-grp input.quantity::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body[data-page="1"] #product-offer #quantity-grp .unit {
  border: none !important;
  background: transparent !important;
  padding: 0 4px !important;
  font-size: 0.85rem !important;
  color: #64748b !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !}

/* Modernized Cart Button */
body[data-page="1"] #product-offer .basket-form-inline button[name="inWarenkorb"] {
  background-color: var(--b44-gold) !important;
  border-color: var(--b44-gold) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  border-radius: 8px !important;
  height: 48px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 4px 6px -1px rgba(224, 123, 26, 0.15), 0 2px 4px -1px rgba(224, 123, 26, 0.1) !important;
}
body[data-page="1"] #product-offer .basket-form-inline button[name="inWarenkorb"]:hover {
  background-color: var(--b44-gold-dark) !important;
  border-color: var(--b44-gold-dark) !important;
  box-shadow: 0 10px 15px -3px rgba(224, 123, 26, 0.25), 0 4px 6px -2px rgba(224, 123, 26, 0.1) !important;
  transform: translateY(-1px) !important;
}
body[data-page="1"] #product-offer .basket-form-inline button[name="inWarenkorb"]:active {
  transform: translateY(0) !important;
}

/* PayPal container */
body[data-page="1"] #product-offer #ppc-productDetails-instalment-banner {
  margin-top: 12px !important;
}
body[data-page="1"] #product-offer #ppc-productDetails-instalment-banner button {
  border-radius: 8px !important;
  border-color: #cbd5e1 !important;
  font-size: 0.85rem !important;
  color: #475569 !important;
  height: 48px !important;
}
body[data-page="1"] .paypal-express-wrapper,
body[data-page="1"] #paypal-express-button,
body[data-page="1"] .paypal-button-container {
  margin-top: 12px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

/* Actions styling */
body[data-page="1"] #product-offer .product-actions {
  display: flex !important;
  gap: 8px !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
}
body[data-page="1"] #product-offer .product-actions button.btn-secondary {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  border-radius: 8px !important;
  width: 42px !important;
  height: 42px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s !important;
  box-shadow: none !important;
  padding: 0 !important;
}
body[data-page="1"] #product-offer .product-actions button.btn-secondary:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* Ask question button styling */
body[data-page="1"] #product-offer button.question {
  background: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  text-decoration: none !important;
  transition: all 0.2s !important;
}
body[data-page="1"] #product-offer button.question:hover {
  background: #e2e8f0 !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}
body[data-page="1"] #product-offer .question-on-item {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 5. Lower Content Area Modernization (Description, Tech Specs, Downloads) */
body[data-page="1"] NAV.tab-navigation,
body[data-page="1"] .tab-navigation {
  margin-top: 36px !important;
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body[data-page="1"] NAV.tab-navigation #product-tabs.nav-tabs {
  border-bottom: none !important;
  display: flex !important;
  flex-flow: row wrap !important;
  gap: 8px !important;
  margin-bottom: 16px !important;
}
body[data-page="1"] NAV.tab-navigation #product-tabs.nav-tabs .nav-link {
  border: 1px solid #cbd5e1 !important;
  border-radius: 8px !important;
  color: #475569 !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  background-color: #ffffff !important;
  transition: all 0.2s ease !important;
}
body[data-page="1"] NAV.tab-navigation #product-tabs.nav-tabs .nav-link.active {
  border-color: var(--b44-gold) !important;
  color: var(--b44-gold) !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 6px -1px rgba(224, 123, 26, 0.05) !important;
}
body[data-page="1"] NAV.tab-navigation #product-tabs.nav-tabs .nav-link:hover:not(.active) {
  border-color: #94a3b8 !important;
  color: #0f172a !important;
  background-color: #f8fafc !important;
}
body[data-page="1"] NAV.tab-navigation .tab-content {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 24px 32px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02) !important;
}
body[data-page="1"] NAV.tab-navigation .tab-content table.table {
  width: 100% !important;
  margin-bottom: 0 !important;
}
body[data-page="1"] NAV.tab-navigation .tab-content table.table td {
  padding: 12px 16px !important;
  border-top: 1px solid #f1f5f9 !important;
  color: #475569 !important;
  font-size: 0.95rem !important;
}
body[data-page="1"] NAV.tab-navigation .tab-content table.table tr:first-child td {
  border-top: none !important;
}
body[data-page="1"] NAV.tab-navigation .tab-content table.table td.attr-label {
  font-weight: 600 !important;
  color: #0f172a !important;
  width: 30% !important;
}

/* ==========================================================================
   SUPREME PDP REDESIGN: PHASE 1A (GRID, GALLERY CARD & BUYBOX CARD)
   ========================================================================== */

/* --- Globale PDP-Breite & Zentrierung --- */
body[data-page="1"] #content-wrapper {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* --- Spalten-Grid (Desktop ab 992px) --- */
@media (min-width: 992px) {
  body[data-page="1"] #product-offer {
    display: flex !important;
    flex-flow: row nowrap !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 40px !important;
    width: 100% !important;
    margin-bottom: 48px !important;
  }
  body[data-page="1"] #product-offer > .product-gallery {
    flex: 0 0 calc(52% - 20px) !important;
    max-width: calc(52% - 20px) !important;
    width: calc(52% - 20px) !important;
    padding: 0 !important;
  }
  body[data-page="1"] #product-offer > .product-info {
    flex: 0 0 calc(48% - 20px) !important;
    max-width: calc(48% - 20px) !important;
    width: calc(48% - 20px) !important;
    padding: 0 !important;
  }
}

/* --- Spalten-Grid (Mobile bis 991px) --- */
@media (max-width: 991px) {
  body[data-page="1"] #product-offer {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  body[data-page="1"] #product-offer > .product-gallery,
  body[data-page="1"] #product-offer > .product-info {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }
}

/* --- Galerie-Card (links) --- */
body[data-page="1"] #gallery_wrapper {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.03), 0 8px 10px -6px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
  width: 100% !important;
}
body[data-page="1"] #gallery_preview_wrapper {
  margin-top: 16px !important;
  max-width: 100% !important;
}
body[data-page="1"] #gallery_preview .square-image {
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  transition: border-color 0.2s ease !important;
}
body[data-page="1"] #gallery_preview .slick-slide.slick-current .square-image,
body[data-page="1"] #gallery_preview .slick-slide.active .square-image,
body[data-page="1"] #gallery_preview .slick-slide.slick-active .square-image {
  border: 2px solid #e07b1a !important;
}
body[data-page="1"] #gallery_preview .square-image:hover {
  border-color: #f0993a !important;
}

/* --- Buybox-Card (rechts) --- */
body[data-page="1"] #product-offer .product-info {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  padding: 32px !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.03), 0 8px 10px -6px rgba(0, 0, 0, 0.03) !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  max-width: 100% !important;
}
@media (max-width: 991px) {
  body[data-page="1"] #product-offer .product-info {
    padding: 24px !important;
  }
}

/* ==========================================================================
   SUPREME PDP REDESIGN: PHASE 1B (BUYBOX & VISUAL POLISH)
   ========================================================================== */

/* --- 1. Produkt-Metadaten verkleinern & visual spacing (.info-essential) --- */
body[data-page="1"] #product-offer .product-info .info-essential {
  font-size: 0.75rem !important;
  color: #64748b !important;
  margin-top: 16px !important;
  margin-bottom: 0 !important;
  padding: 12px 0 0 0 !important;
  border-top: 1px solid #f1f5f9 !important;
  list-style: none !important;
  display: flex !important;
  flex-flow: row wrap !important;
  gap: 8px 16px !important;
}
body[data-page="1"] #product-offer .product-info .info-essential li {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
}
body[data-page="1"] #product-offer .product-info .info-essential li strong {
  font-weight: 500 !important;
  color: #94a3b8 !important;
}
body[data-page="1"] #product-offer .product-info .info-essential li span,
body[data-page="1"] #product-offer .product-info .info-essential li a {
  color: #64748b !important;
  font-weight: 600 !important;
}
body[data-page="1"] #product-offer .product-info .info-essential .product-manufacturer picture {
  display: none !important;
}
body[data-page="1"] #product-offer .product-info .product-manufacturer {
  display: inline-flex !important;
}

/* Kategorie & Brand dezent stylen */
body[data-page="1"] #product-offer .product-category {
  font-size: 0.725rem !important;
  color: #94a3b8 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 6px !important;
  font-weight: 600 !important;
}
body[data-page="1"] #product-offer .product-category a {
  color: #e07b1a !important;
  font-weight: 600 !important;
}

/* --- 2. Titel & Typografie verfeinern --- */
body[data-page="1"] #product-offer .product-title {
  font-size: 1.75rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  line-height: 1.35 !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.01em !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}

/* --- 3. Preisbereich modernisieren --- */
body[data-page="1"] #product-offer .price_wrapper {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  padding-bottom: 16px !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
body[data-page="1"] #product-offer .price_wrapper .price.h1 {
  font-size: 2.125rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  letter-spacing: -0.02em !important;
  line-height: 1.1 !important;
}
body[data-page="1"] #product-offer .suggested-price {
  font-size: 0.775rem !important;
  color: #64748b !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  padding: 3px 8px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin-left: 10px !important;
  vertical-align: middle !important;
  font-weight: 500 !important;
}
body[data-page="1"] #product-offer .suggested-price .yousave {
  font-size: 0.775rem !important;
  color: #ef4444 !important;
  font-weight: 600 !important;
}
body[data-page="1"] #product-offer .price-note {
  font-size: 0.775rem !important;
  color: #64748b !important;
  margin-top: 6px !important;
}
body[data-page="1"] #product-offer .price-note a.shipment {
  color: #e07b1a !important;
  font-weight: 600 !important;
}

/* --- 4. Warenkorbbutton verfeinern --- */
body[data-page="1"] #product-offer button[name="inWarenkorb"] {
  background-color: #e07b1a !important;
  border: 1px solid #e07b1a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  border-radius: 10px !important;
  height: 48px !important;
  box-shadow: 0 4px 12px rgba(224, 123, 26, 0.1) !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
body[data-page="1"] #product-offer button[name="inWarenkorb"]:hover {
  background-color: #c9670f !important;
  border-color: #c9670f !important;
  box-shadow: 0 6px 16px rgba(224, 123, 26, 0.2) !important;
  transform: translateY(-1px) !important;
}
body[data-page="1"] #product-offer button[name="inWarenkorb"]:active {
  transform: translateY(0) !important;
}

/* --- 5. Quantity Stepper verbessern --- */
body[data-page="1"] #product-offer .basket-form-inline {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  gap: 12px !important;
}
body[data-page="1"] #product-offer .basket-form-inline > [class*="col-"],
body[data-page="1"] #product-offer .basket-form-inline > .col {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
body[data-page="1"] #product-offer .basket-form-inline > [class*="col-"]:first-child,
body[data-page="1"] #product-offer .basket-form-inline > .col:first-child {
  flex: 0 0 130px !important;
  width: 130px !important;
  max-width: 130px !important;
}
body[data-page="1"] #product-offer #quantity-grp {
  border: 1px solid #cbd5e1 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #f8fafc !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 48px !important;
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
  box-sizing: border-box !important;
  padding: 0 4px !important;
  margin: 0 !important;
  transition: border-color 0.2s ease !important;
}
body[data-page="1"] #product-offer #quantity-grp:focus-within {
  border-color: #94a3b8 !important;
}
body[data-page="1"] #product-offer #quantity-grp .input-group-prepend,
body[data-page="1"] #product-offer #quantity-grp .input-group-append {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
}
body[data-page="1"] #product-offer #quantity-grp .btn {
  border: none !important;
  background: transparent !important;
  color: #64748b !important;
  width: 32px !important;
  height: 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.85rem !important;
  padding: 0 !important;
  cursor: pointer !important;
  border-radius: 6px !important;
  transition: all 0.2s ease !important;
}
body[data-page="1"] #product-offer #quantity-grp .btn:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}
body[data-page="1"] #product-offer #quantity-grp input.quantity {
  border: none !important;
  text-align: center !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  color: #0f172a !important;
  height: 100% !important;
  padding: 0 !important;
  width: 44px !important;
  background: transparent !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body[data-page="1"] #product-offer #quantity-grp .unit {
  display: none !important;
}

/* --- 6. & 7. Buybox-Card Verfeinerung & Visual Rhythm --- */
body[data-page="1"] #product-offer .product-info {
  border: 1px solid #e2e8f0 !important;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  padding: 36px !important;
}
@media (max-width: 991px) {
  body[data-page="1"] #product-offer .product-info {
    padding: 24px !important;
  }
}
/* Inner spacings */
body[data-page="1"] #product-offer .product-info-inner {
  margin-bottom: 16px !important;
}
body[data-page="1"] #product-offer .shortdesc {
  color: #475569 !important;
  font-size: 0.925rem !important;
  line-height: 1.55 !important;
  margin-top: 10px !important;
}
body[data-page="1"] #product-offer .rating-wrapper {
  margin-top: 6px !important;
}
body[data-page="1"] #product-offer .delivery-status {
  margin-top: 16px !important;
  margin-bottom: 20px !important;
}
body[data-page="1"] #product-offer .product-actions {
  margin-top: 20px !important;
}

/* ==========================================================================
   SUPREME PDP REDESIGN: PHASE 1C (ALIGNMENT, TOP SPACING & PREMIUM DEPTH)
   ========================================================================== */

/* --- 1. Schließen-Button (X) über Galerie im Normalzustand ausblenden --- */
body[data-page="1"] #image_wrapper:not(.fullscreen) #image_fullscreen_close {
  display: none !important;
}

/* --- 2 & 3. Top-Spacing reduzieren & Bündigkeit der Spalten --- */
body[data-page="1"] .product-gallery .product-detail-image-topbar {
  display: none !important;
}
body[data-page="1"] #product-offer #image_wrapper .product-actions {
  display: none !important;
}
body[data-page="1"] #image_wrapper {
  margin-bottom: 24px !important;
}
body[data-page="1"] .breadcrumb {
  margin-top: 8px !important;
  margin-bottom: 16px !important;
}
body[data-page="1"] #product-offer {
  margin-top: 8px !important;
}

/* --- 4. Galerie-Card Premium-Tiefe --- */
body[data-page="1"] #gallery_wrapper {
  background: #ffffff !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.02), 0 1px 3px rgba(15, 23, 42, 0.01) !important;
  box-sizing: border-box !important;
}

/* --- 5. Thumbnail-Leiste veredeln --- */
body[data-page="1"] #gallery_preview .slick-slide {
  padding: 0 6px !important;
}
body[data-page="1"] #gallery_preview .square-image {
  border: 1px solid #f1f5f9 !important;
  border-radius: 10px !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  background-color: #ffffff !important;
}
/* Entfernt doppelten äußeren JTL-Standardrahmen */
body[data-page="1"] #gallery_preview .slick-slide {
  border: none !important;
}
body[data-page="1"] #gallery_preview .slick-current .square-image {
  border-color: #e07b1a !important;
  box-shadow: 0 0 0 2px rgba(224, 123, 26, 0.12), 0 4px 12px rgba(15, 23, 42, 0.04) !important;
  background-color: #ffffff !important;
}
body[data-page="1"] #gallery_preview .square-image:hover {
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
}
body[data-page="1"] #gallery_preview_wrapper {
  margin-top: 12px !important;
}

/* --- 6. Buybox-Card Micro-Spacing --- */
body[data-page="1"] #product-offer .price_wrapper {
  margin-top: 24px !important;
  margin-bottom: 24px !important;
  padding-top: 20px !important;
  padding-bottom: 20px !important;
  border-top: 1px solid #f1f5f9 !important;
  border-bottom: 1px solid #f1f5f9 !important;
}
body[data-page="1"] #product-offer .delivery-status {
  background-color: #f8fafc !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  margin-top: 16px !important;
  margin-bottom: 24px !important;
}
body[data-page="1"] #product-offer .basket-form-inline {
  margin-top: 16px !important;
  margin-bottom: 12px !important;
}
body[data-page="1"] #product-offer #quantity-grp {
  background-color: #ffffff !important;
  border-color: #cbd5e1 !important;
}

/* ==========================================================================
   SUPREME PDP REDESIGN: PHASE 1D (PREMIUM POLISH)
   ========================================================================== */

/* --- 1. Mehr Tiefenwirkung & Layering (Floating Cards) --- */
body[data-page="1"] #product-offer #gallery_wrapper {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  border-radius: 16px !important;
  padding: 32px !important;
  box-shadow: 0 12px 40px -12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body[data-page="1"] #product-offer #gallery_wrapper:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 48px -12px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

body[data-page="1"] #product-offer .product-info {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  border-radius: 16px !important;
  padding: 40px !important;
  box-shadow: 0 12px 40px -12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body[data-page="1"] #product-offer .product-info:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 20px 48px -12px rgba(15, 23, 42, 0.10), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

@media (max-width: 991px) {
  body[data-page="1"] #product-offer #gallery_wrapper {
    padding: 20px !important;
  }
  body[data-page="1"] #product-offer .product-info {
    padding: 24px !important;
  }
}

/* --- 2. Galerie Premium-Look --- */
body[data-page="1"] #product-offer #gallery .square-image {
  overflow: hidden !important;
  border-radius: 12px !important;
}

body[data-page="1"] #product-offer #gallery .square-image img {
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body[data-page="1"] #product-offer #gallery .square-image:hover img {
  transform: scale(1.025) !important;
}

/* Galerie-Thumbnails werden einheitlich oben gesteuert */

body[data-page="1"] #product-offer #image_wrapper {
  margin-bottom: 32px !important;
}

/* Elegante & dezente Pfeile für Galerie-Thumbnails */
body[data-page="1"] #product-offer #gallery_preview_wrapper .slick-arrow {
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  border-radius: 50% !important;
  width: 30px !important;
  height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  z-index: 10 !important;
}

body[data-page="1"] #product-offer #gallery_preview_wrapper .slick-arrow:hover {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1) !important;
}

/* --- 3. Staffelpreise modernisieren (Card-Optik & weiche Rows) --- */
body[data-page="1"] #product-offer .bulk-prices {
  background: #f8fafc !important;
  border: 1px solid #f1f5f9 !important;
  border-radius: 12px !important;
  padding: 16px 20px !important;
  margin-top: 20px !important;
  max-width: 350px !important;
}

body[data-page="1"] #product-offer .bulk-prices table {
  width: 100% !important;
  margin-bottom: 0 !important;
  border-collapse: collapse !important;
  background: transparent !important;
}

body[data-page="1"] #product-offer .bulk-prices table th {
  font-size: 0.725rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: #64748b !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 8px 8px 12px 8px !important;
  font-weight: 600 !important;
  width: 50% !important;
}

body[data-page="1"] #product-offer .bulk-prices table td {
  padding: 12px 8px !important;
  font-size: 0.85rem !important;
  color: #475569 !important;
  border-top: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  vertical-align: middle !important;
}

body[data-page="1"] #product-offer .bulk-prices table tr:last-child td {
  border-bottom: none !important;
}

body[data-page="1"] #product-offer .bulk-prices table tbody tr {
  transition: background-color 0.2s ease !important;
}

body[data-page="1"] #product-offer .bulk-prices table tbody tr:hover {
  background-color: rgba(224, 123, 26, 0.03) !important;
}

body[data-page="1"] #product-offer .bulk-prices table tbody td:first-child {
  font-weight: 600 !important;
  color: #0f172a !important;
}

body[data-page="1"] #product-offer .bulk-prices table td span.bulk-price {
  color: #e07b1a !important;
  font-weight: 700 !important;
}

body[data-page="1"] #product-offer .bulk-prices table td span.footnote-reference {
  color: #94a3b8 !important;
}

/* --- 4. Buybox beruhigen (Visuelle Hierarchie) --- */
/* Beruhigung der Meta-Infos (.info-essential) */
body[data-page="1"] #product-offer .info-essential {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px 16px !important;
  padding: 0 !important;
  margin: 12px 0 20px 0 !important;
  list-style: none !important;
  font-size: 0.775rem !important;
  color: #64748b !important;
}

body[data-page="1"] #product-offer .info-essential li {
  display: inline-flex !important;
  align-items: center !important;
}

body[data-page="1"] #product-offer .info-essential li:not(:last-child)::after {
  content: "•" !important;
  margin-left: 16px !important;
  color: #cbd5e1 !important;
  font-weight: normal !important;
}

body[data-page="1"] #product-offer .info-essential li strong {
  font-weight: 500 !important;
  color: #94a3b8 !important;
  margin-right: 4px !important;
}

body[data-page="1"] #product-offer .info-essential li span,
body[data-page="1"] #product-offer .info-essential li a {
  color: #64748b !important;
  font-weight: 500 !important;
}

body[data-page="1"] #product-offer .info-essential li a:hover {
  color: #e07b1a !important;
  text-decoration: none !important;
}

/* Preis-Bereich de-cluttern */
body[data-page="1"] #product-offer .price_wrapper {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
  border-top: none !important;
  border-bottom: 1px solid #f1f5f9 !important;
  text-align: left !important;
}

body[data-page="1"] #product-offer .suggested-price {
  font-size: 0.775rem !important;
  color: #64748b !important;
  margin-top: 8px !important;
  font-weight: 400 !important;
  text-align: left !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  display: block !important;
  width: 100% !important;
}

body[data-page="1"] #product-offer .suggested-price .value {
  text-decoration: line-through !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

body[data-page="1"] #product-offer .yousave {
  display: inline-block !important;
  font-size: 0.775rem !important;
  background: rgba(224, 123, 26, 0.08) !important;
  color: #e07b1a !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  margin-top: 6px !important;
  font-weight: 600 !important;
  text-align: left !important;
  margin-left: 0 !important;
}

/* --- 5. Secondary Buttons verbessern --- */
body[data-page="1"] #product-offer .product-actions-buybox {
  display: flex !important;
  flex-flow: row wrap !important;
  gap: 12px !important;
  margin-top: 24px !important;
  padding-top: 20px !important;
  border-top: 1px solid #f1f5f9 !important;
}

body[data-page="1"] #product-offer .product-actions-buybox > div {
  flex: 1 1 calc(33.333% - 8px) !important;
  min-width: 125px !important;
}

body[data-page="1"] #product-offer .product-actions-buybox button,
body[data-page="1"] #product-offer .product-actions-buybox a.btn {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #334155 !important;
  border-radius: 10px !important;
  font-size: 0.825rem !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
  width: 100% !important;
}

body[data-page="1"] #product-offer .product-actions-buybox button:hover,
body[data-page="1"] #product-offer .product-actions-buybox a.btn:hover {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

/* Icons in Secondary Buttons */
body[data-page="1"] #product-offer .product-actions-buybox i,
body[data-page="1"] #product-offer .product-actions-buybox span.fa,
body[data-page="1"] #product-offer .product-actions-buybox span.far {
  font-size: 0.95rem !important;
  color: #64748b !important;
  transition: color 0.25s !important;
}

body[data-page="1"] #product-offer .product-actions-buybox button:hover i,
body[data-page="1"] #product-offer .product-actions-buybox button:hover span.fa,
body[data-page="1"] #product-offer .product-actions-buybox button:hover span.far,
body[data-page="1"] #product-offer .product-actions-buybox a.btn:hover i {
  color: #ffffff !important;
}

/* Compare-Button Text Fix */
/* Styling für Wunschliste Text-Überschreibung */
body[data-page="1"] #product-offer .product-actions-buybox .action-item-wishlist button.wishlist span.wishlist-button-text {
  display: none !important;
}
body[data-page="1"] #product-offer .product-actions-buybox .action-item-wishlist button.wishlist span.wishlist-button-inner::after {
  content: "Wunschliste" !important;
  font-size: 0.825rem !important;
  font-weight: 600 !important;
  color: #334155 !important;
  transition: color 0.25s !important;
}
body[data-page="1"] #product-offer .product-actions-buybox .action-item-wishlist button.wishlist:hover span.wishlist-button-inner::after {
  color: #ffffff !important;
}

/* Compare-Button Text Fix */
body[data-page="1"] #product-offer .product-actions-buybox .action-item-compare {
  display: inline-flex !important;
  align-items: center !important;
  width: 100% !important;
}
body[data-page="1"] #product-offer .product-actions-buybox .action-item-compare button.compare {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
}
body[data-page="1"] #product-offer .product-actions-buybox .action-item-compare button.compare::after {
  content: "Vergleichsliste" !important;
  font-size: 0.825rem !important;
  font-weight: 600 !important;
}
body[data-page="1"] #product-offer .product-actions-buybox .action-item-compare span.action-text {
  display: none !important;
}

/* Alten Button "Frage zum Artikel" in der Stock-Zeile ausblenden */
body[data-page="1"] #product-offer .stock-information .question-on-item {
  display: none !important;
}

/* --- 6. Trust-/Premium-Leiste unter Buybox --- */
body[data-page="1"] #product-offer .product-trust-bar {
  display: flex !important;
  flex-flow: row wrap !important;
  justify-content: space-around !important;
  gap: 12px !important;
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px solid #f1f5f9 !important;
}

body[data-page="1"] #product-offer .product-trust-bar .trust-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 0.725rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
}

body[data-page="1"] #product-offer .product-trust-bar .trust-item i {
  font-size: 0.85rem !important;
  color: #e07b1a !important;
}

@media (max-width: 575px) {
  body[data-page="1"] #product-offer .product-trust-bar {
    justify-content: flex-start !important;
    gap: 12px 24px !important;
  }
}

/* ==========================================================================
   SUPREME PDP REDESIGN: PHASE 2A (PREMIUM CONTENT CARD & DOWNLOADS LIST)
   ========================================================================== */

/* --- 1. Premium-Cards Layout --- */
body[data-page="1"] .product-detail-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  margin-bottom: 24px !important;
  padding: 40px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}
body[data-page="1"] .product-detail-card:hover {
  box-shadow: 0 16px 36px -12px rgba(15, 23, 42, 0.07), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

body[data-page="1"] .product-detail-card .card-header {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  background: transparent !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 0 0 16px 0 !important;
  margin-bottom: 24px !important;
}

body[data-page="1"] .product-detail-card .card-body {
  padding: 0 !important;
  background: transparent !important;
}

/* --- 2 & 3. Beschreibung & technische Aufzählungen Veredelung --- */
body[data-page="1"] .description-card .desc {
  font-size: 0.95rem !important;
  line-height: 1.75 !important;
  color: #475569 !important; /* Softer slate gray */
}

body[data-page="1"] .description-card .desc p {
  margin-bottom: 20px !important;
  line-height: 1.75 !important;
}

body[data-page="1"] .description-card .desc h2 {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-top: 36px !important;
  margin-bottom: 16px !important;
  letter-spacing: -0.02em !important;
}

body[data-page="1"] .description-card .desc h3 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-top: 28px !important;
  margin-bottom: 12px !important;
  letter-spacing: -0.01em !important;
}

body[data-page="1"] .description-card .desc h4 {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-top: 24px !important;
  margin-bottom: 8px !important;
}

/* Bullet-Listen Modernisierung */
body[data-page="1"] .description-card .desc ul {
  padding-left: 0 !important;
  margin-top: 16px !important;
  margin-bottom: 24px !important;
  list-style-type: none !important;
  list-style: none !important;
}

body[data-page="1"] .description-card .desc li {
  position: relative !important;
  padding-left: 20px !important;
  margin-bottom: 10px !important;
  line-height: 1.65 !important;
  color: #475569 !important;
  list-style-type: none !important;
  list-style: none !important;
}

body[data-page="1"] .description-card .desc li::before {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: 10px !important;
  width: 5px !important;
  height: 5px !important;
  background-color: #94a3b8 !important; /* Smaller bullet-point */
  border-radius: 50% !important;
}

/* Nummerierte Listen */
body[data-page="1"] .description-card .desc ol {
  padding-left: 20px !important;
  margin-top: 16px !important;
  margin-bottom: 24px !important;
}

body[data-page="1"] .description-card .desc ol li {
  margin-bottom: 10px !important;
  line-height: 1.65 !important;
  color: #475569 !important;
}

/* Standard-Links in Beschreibung auf Brand-Farbe anpassen (ohne primitives HTML-Gefühl) */
body[data-page="1"] .description-card .desc a:not(.btn) {
  color: #e07b1a !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: color 0.2s ease !important;
}
body[data-page="1"] .description-card .desc a:not(.btn):hover {
  color: #c86a12 !important;
  text-decoration: underline !important;
}

/* --- 4. Inline Media/Document Downloads modernisieren --- */
/* Ensure description media block uses full width and is not constrained by Bootstrap flex styles */
body[data-page="1"] .description-card .media {
  display: block !important;
  width: 100% !important;
  margin-top: 32px !important;
}

/* Override JTL standard media card-columns layout with clean responsive CSS Grid */
body[data-page="1"] .description-card .mediafiles {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
  gap: 12px !important;
  column-count: auto !important; /* Overrides Bootstrap column-count */
  width: 100% !important;
  margin-top: 16px !important;
}

/* If there is only 1 PDF, limit its max-width so it does not stretch across the screen */
body[data-page="1"] .description-card .mediafiles > .card:only-child {
  max-width: 280px !important;
}

/* 0 PDFs: hide container without leaving blank space */
body[data-page="1"] .description-card .mediafiles:empty {
  display: none !important;
  margin: 0 !important;
}
body[data-page="1"] .description-card .media:has(.mediafiles:empty) {
  display: none !important;
  margin: 0 !important;
}

/* PDF/Misc – Zweigeteilte Premium-Dokumentenkarte (Header & Footer-Download) */
body[data-page="1"] .description-card .mediafiles-pdf,
body[data-page="1"] .description-card .mediafiles-misc {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 0 !important;             /* Kein Padding auf der Kachel für vollen Footer */
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;        /* Beschneidet Footer-Hintergrund auf Rundung */
  margin-bottom: 0 !important;
  box-sizing: border-box !important;
  height: 100% !important;            /* Gleichmäßige Höhe */
}

body[data-page="1"] .description-card .mediafiles-pdf:hover,
body[data-page="1"] .description-card .mediafiles-misc:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.1) !important;
}

/* Card-Body: Wrapper für Flexbox-Verteilung */
body[data-page="1"] .description-card .mediafiles-pdf .card-body,
body[data-page="1"] .description-card .mediafiles-misc .card-body {
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  flex-grow: 1 !important;
  justify-content: space-between !important;
  height: 100% !important;
}

/* h4.card-title – Dokumententitel (oben zentriert) */
body[data-page="1"] .description-card .mediafiles-pdf .card-title,
body[data-page="1"] .description-card .mediafiles-misc .card-title {
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 16px 16px 14px 16px !important;
  flex-grow: 1 !important;
  background: #ffffff !important;
}

/* Description text: ausblenden */
body[data-page="1"] .description-card .mediafiles-pdf .mediafiles-description,
body[data-page="1"] .description-card .mediafiles-misc .mediafiles-description {
  display: none !important;
}

/* Row: Download-Footer-Bereich über die komplette Breite */
body[data-page="1"] .description-card .mediafiles-pdf .row,
body[data-page="1"] .description-card .mediafiles-misc .row {
  display: block !important;
  margin: 0 !important;
  width: 100% !important;
  background: #f8fafc !important;
  border-top: 1px solid #f1f5f9 !important;
  padding: 0 !important;
}

/* Spalten-Reset */
body[data-page="1"] .description-card .mediafiles-pdf .col.mediafiles-description,
body[data-page="1"] .description-card .mediafiles-misc .col.mediafiles-description {
  display: none !important;
}

body[data-page="1"] .description-card .mediafiles-pdf .row > div,
body[data-page="1"] .description-card .mediafiles-misc .row > div {
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
  padding: 0 !important;
}

/* Download-Link: Footer-Leiste über die volle Breite */
body[data-page="1"] .description-card .mediafiles-pdf a,
body[data-page="1"] .description-card .mediafiles-misc a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 10px 16px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  color: #e07b1a !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

body[data-page="1"] .description-card .mediafiles-pdf a:hover,
body[data-page="1"] .description-card .mediafiles-misc a:hover {
  background-color: #f1f5f9 !important;
  color: #c86a12 !important;
  text-decoration: none !important;
}

/* Alte HTML-Elemente verstecken */
body[data-page="1"] .description-card .mediafiles-pdf a span,
body[data-page="1"] .description-card .mediafiles-misc a span,
body[data-page="1"] .description-card .mediafiles-pdf a img,
body[data-page="1"] .description-card .mediafiles-misc a img {
  display: none !important;
}

/* Text "Download" einfügen */
body[data-page="1"] .description-card .mediafiles-pdf a::after,
body[data-page="1"] .description-card .mediafiles-misc a::after {
  content: "Download" !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
}

/* PDF-Icon Bilddatei */
body[data-page="1"] .description-card .mediafiles-pdf a::before,
body[data-page="1"] .description-card .mediafiles-misc a::before {
  content: "" !important;
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  background-image: url('/templates/md_it_hightech_child/img/icons/pdf-icon.png') !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  vertical-align: middle !important;
  margin-right: 10px !important;
}

body[data-page="1"] .description-card .mediafiles-pdf a:hover::before,
body[data-page="1"] .description-card .mediafiles-misc a:hover::before {
  width: 20px !important;
  height: 20px !important;
  background-image: url('/templates/md_it_hightech_child/img/icons/pdf-icon.png') !important;
}


/* --- 5. Downloads-Liste Veredelung (Dokumentencharakter) --- */
body[data-page="1"] .downloads-card {
  box-shadow: 0 12px 36px -12px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
}

body[data-page="1"] .downloads-card:hover {
  box-shadow: 0 20px 48px -12px rgba(15, 23, 42, 0.08), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

body[data-page="1"] .downloads-card .product-download-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

body[data-page="1"] .downloads-card .download-item-row {
  display: flex !important;
  align-items: center !important;
  padding: 20px 24px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  margin-bottom: 0 !important;
  gap: 20px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body[data-page="1"] .downloads-card .download-item-row:hover {
  border-color: #cbd5e1 !important;
  background-color: #f8fafc !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.03) !important;
}

body[data-page="1"] .downloads-card .download-icon-left {
  background: rgba(239, 68, 68, 0.08) !important;
  border-radius: 10px !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

body[data-page="1"] .downloads-card .download-icon-left i {
  font-size: 1.35rem !important;
  color: #ef4444 !important; /* PDF Rot */
}

body[data-page="1"] .downloads-card .download-meta {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  text-align: left !important;
}

body[data-page="1"] .downloads-card .download-title {
  font-weight: 700 !important;
  color: #0f172a !important;
  font-size: 0.975rem !important;
}

body[data-page="1"] .downloads-card .download-desc {
  font-size: 0.825rem !important;
  color: #64748b !important;
  margin-top: 4px !important;
  line-height: 1.4 !important;
}

body[data-page="1"] .downloads-card .download-action-right {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

body[data-page="1"] .downloads-card .download-action-right a.btn {
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  padding: 10px 18px !important;
  border-radius: 8px !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02) !important;
  transition: all 0.2s ease !important;
}

body[data-page="1"] .downloads-card .download-action-right a.btn:hover {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
}

/* --- Mobile: PDF-Grid 1 Spalte auf kleinen Screens --- */
@media (max-width: 767px) {
  body[data-page="1"] .description-card .mediafiles {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  body[data-page="1"] .description-card .mediafiles > .card:only-child {
    max-width: 100% !important;
  }
  body[data-page="1"] .description-card .mediafiles-pdf a,
  body[data-page="1"] .description-card .mediafiles-misc a {
    padding: 10px 14px !important;
    font-size: 0.8rem !important;
    justify-content: center !important;
    width: 100% !important;
  }
}

/* Responsives Verhalten */
@media (max-width: 991px) {
  body[data-page="1"] .product-detail-card {
    padding: 32px 24px !important;
  }
}

@media (max-width: 575px) {
  body[data-page="1"] .downloads-card .download-item-row {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding: 20px !important;
  }
  body[data-page="1"] .downloads-card .download-action-right {
    width: 100% !important;
  }
  body[data-page="1"] .downloads-card .download-action-right a.btn {
    width: 100% !important;
    text-align: center !important;
  }
}

/* --- 6. Accordion & Specs Card Modernisierung --- */
body[data-page="1"] #tabAccordion {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

body[data-page="1"] #tabAccordion > .card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  box-shadow: 0 10px 30px -10px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

body[data-page="1"] #tabAccordion > .card:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 16px 36px -12px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

body[data-page="1"] #tabAccordion > .card > .card-header {
  background: #f8fafc !important;
  border: none !important;
  padding: 22px 28px !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin: 0 !important;
  cursor: pointer !important;
  position: relative !important;
  transition: all 0.2s ease !important;
}

body[data-page="1"] #tabAccordion > .card > .card-header:hover {
  background-color: #f1f5f9 !important;
}

body[data-page="1"] #tabAccordion > .card > .card-header::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  right: 28px !important;
  top: 50% !important;
  width: 9px !important;
  height: 9px !important;
  border-right: 2px solid #64748b !important;
  border-bottom: 2px solid #64748b !important;
  transform: translateY(-50%) rotate(45deg) !important;
  transition: transform 0.2s ease, border-color 0.2s ease !important;
  font: inherit !important;
}

body[data-page="1"] #tabAccordion > .card > .card-header[aria-expanded="true"]::after {
  transform: translateY(-20%) rotate(-135deg) !important;
  border-color: #0f172a !important;
}

body[data-page="1"] #tabAccordion > .card > .card-header[aria-expanded="true"] {
  border-bottom: 1px solid #f1f5f9 !important;
  background-color: #f8fafc !important;
}

body[data-page="1"] #tabAccordion > .card > .collapse > .card-body {
  padding: 28px 32px !important;
  background: #ffffff !important;
}

/* Attributes Table formatting */
body[data-page="1"] #tabAccordion #tab-specs .product-attributes {
  max-width: 880px !important;
  margin: 0 auto !important;
  padding: 10px 0 !important;
}

body[data-page="1"] #tabAccordion #tab-specs .product-attributes table {
  width: 100% !important;
  border-collapse: collapse !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
}

body[data-page="1"] #tabAccordion #tab-specs .product-attributes thead {
  display: none !important;
}

body[data-page="1"] #tabAccordion #tab-specs .product-attributes tr:has(th) {
  display: none !important;
}

body[data-page="1"] #tabAccordion #tab-specs .product-attributes tr {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 20px !important; /* Space inside the card */
  border-left: none !important;   /* Remove vertical left border line */
  border-right: none !important;  /* Remove vertical right border line */
  border-top: none !important;    /* Remove top border line */
  border-bottom: 1px solid #f1f5f9 !important; /* Keep only bottom divider */
  background: transparent !important;
  margin: 0 !important;
  transition: background-color 0.2s ease !important;
}

body[data-page="1"] #tabAccordion #tab-specs .product-attributes tr:hover {
  background-color: #f8fafc !important;
  border-radius: 8px !important;
}

body[data-page="1"] #tabAccordion #tab-specs .product-attributes tr:last-child {
  border-bottom: none !important;
}

body[data-page="1"] #tabAccordion #tab-specs .product-attributes td {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
}

body[data-page="1"] #tabAccordion #tab-specs .product-attributes td.h6 {
  margin-bottom: 0 !important;
  font-weight: 500 !important;
  color: #64748b !important;
  text-align: left !important;
  width: auto !important;
}

body[data-page="1"] #tabAccordion #tab-specs .product-attributes td:last-child {
  font-weight: 600 !important;
  color: #0f172a !important;
  text-align: right !important;
  background-color: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 20px !important;
  padding: 4px 12px !important;
  display: inline-block !important;
  white-space: nowrap !important;
}

body[data-page="1"] #tabAccordion #tab-specs .product-attributes td .badge,
body[data-page="1"] #tabAccordion #tab-specs .product-attributes td .badge-primary {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  padding: 5px 10px !important;
  border: 1px solid #e2e8f0 !important;
  font-size: 0.8rem !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}

body[data-page="1"] #tabAccordion #tab-specs .product-attributes td .badge:hover,
body[data-page="1"] #tabAccordion #tab-specs .product-attributes td .badge-primary:hover {
  background-color: #e2e8f0 !important;
  color: #0f172a !important;
}

@media (max-width: 575px) {
  body[data-page="1"] #tabAccordion #tab-specs .product-attributes tr {
    flex-direction: column !important;
    align-items: flex-start !important;
    padding: 12px 16px !important;
  }
  body[data-page="1"] #tabAccordion #tab-specs .product-attributes tr:hover {
    background-color: transparent !important;
  }
  body[data-page="1"] #tabAccordion #tab-specs .product-attributes td.h6 {
    margin-bottom: 6px !important;
    width: 100% !important;
  }
  body[data-page="1"] #tabAccordion #tab-specs .product-attributes td:last-child {
    text-align: left !important;
    margin-top: 6px !important;
    display: inline-block !important;
    white-space: normal !important;
    width: auto !important;
    padding: 4px 12px !important;
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 20px !important;
  }
}

/* --- 7. Reviews & Ratings Modernisierung --- */

/* Rating Stars in Accordion Header */
body[data-page="1"] #tabAccordion > .card > .card-header .fa-star,
body[data-page="1"] #tabAccordion > .card > .card-header .fa-star-o,
body[data-page="1"] #tabAccordion > .card > .card-header .fa-star-half-o,
body[data-page="1"] #tabAccordion > .card > .card-header [class*="star"] {
  color: #ffb800 !important;
  margin-left: 2px !important;
}

/* 1. Empty State Modernisierung (Wenn keine Bewertungen vorhanden sind) */
body[data-page="1"] #tabAccordion #tab-votes .reviews:has(> p) {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 40px 20px !important;
  max-width: 600px !important;
  margin: 0 auto !important;
}

/* Hide JTL default text "Es gibt noch keine Bewertungen." */
body[data-page="1"] #tabAccordion #tab-votes .reviews:has(> p) > p {
  display: none !important;
}

body[data-page="1"] #tabAccordion #tab-votes .reviews:has(> p) #reviews-overview {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  margin: 0 auto !important;
}

body[data-page="1"] #tabAccordion #tab-votes .reviews:has(> p) #reviews-overview > div {
  max-width: 550px !important;
  width: 100% !important;
  flex: none !important;
  padding: 40px 24px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

@media (max-width: 575px) {
  body[data-page="1"] #tabAccordion #tab-votes .reviews:has(> p) #reviews-overview > div {
    padding: 30px 16px !important;
  }
}

/* Empty State Stars visual indicator */
body[data-page="1"] #tabAccordion #tab-votes .reviews:has(> p) #article_rating::before {
  content: "★★★★★" !important;
  font-size: 2.2rem !important;
  color: #e2e8f0 !important; /* Soft slate stars */
  display: block !important;
  margin-bottom: 16px !important;
  letter-spacing: 4px !important;
  line-height: 1 !important;
}

/* Title and text under empty state stars */
body[data-page="1"] #tabAccordion #tab-votes .reviews:has(> p) #article_rating .subheadline {
  font-size: 0.95rem !important;
  font-weight: 500 !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  margin-bottom: 24px !important;
  max-width: 420px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

body[data-page="1"] #tabAccordion #tab-votes .reviews:has(> p) #article_rating .subheadline::before {
  content: "Noch keine Bewertungen" !important;
  display: block !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 8px !important;
}

/* Button „Artikel bewerten“ Veredelung */
body[data-page="1"] #tabAccordion #tab-votes #article_rating button[name="bewerten"],
body[data-page="1"] #tabAccordion #tab-votes #reviews-list button[name="bewerten"],
body[data-page="1"] #tabAccordion #tab-votes .btn-outline-primary {
  background-color: #e07b1a !important;
  color: #ffffff !important;
  border: 1px solid #e07b1a !important;
  border-radius: 12px !important;
  padding: 12px 24px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

body[data-page="1"] #tabAccordion #tab-votes #article_rating button[name="bewerten"]:hover,
body[data-page="1"] #tabAccordion #tab-votes #reviews-list button[name="bewerten"]:hover,
body[data-page="1"] #tabAccordion #tab-votes .btn-outline-primary:hover {
  background-color: #c86a12 !important;
  border-color: #c86a12 !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(224, 123, 26, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* 2. Review List & Items Modernisierung (Wenn Bewertungen vorhanden sind) */
body[data-page="1"] #tabAccordion #tab-votes #reviews-list .review {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

body[data-page="1"] #tabAccordion #tab-votes #reviews-list .review:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05) !important;
}

body[data-page="1"] #tabAccordion #tab-votes #reviews-list .review .card-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #f1f5f9 !important;
  padding: 16px 20px !important;
  font-size: 0.85rem !important;
  color: #64748b !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
}

body[data-page="1"] #tabAccordion #tab-votes #reviews-list .review .card-body {
  padding: 20px 24px !important;
}

body[data-page="1"] #tabAccordion #tab-votes #reviews-list .review .card-title {
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 10px !important;
}

body[data-page="1"] #tabAccordion #tab-votes #reviews-list .review .card-text {
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  color: #334155 !important;
}

/* Gold stars inside reviews */
body[data-page="1"] #tabAccordion #tab-votes #reviews-list .review i.fa-star,
body[data-page="1"] #tabAccordion #tab-votes #reviews-list .review i.fa-star-o,
body[data-page="1"] #tabAccordion #tab-votes #reviews-list .review i.fa-star-half-o {
  color: #ffb800 !important;
  font-size: 0.9rem !important;
}

/* Nested Shop Owner Replies */
body[data-page="1"] #tabAccordion #tab-votes #reviews-list .review-reply {
  background: #f8fafc !important;
  border-left: 3px solid #e07b1a !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  margin-top: 16px !important;
  margin-left: 20px !important;
}

body[data-page="1"] #tabAccordion #tab-votes #reviews-list .review-reply .review-reply-header {
  font-weight: 700 !important;
  color: #0f172a !important;
  font-size: 0.9rem !important;
  margin-bottom: 6px !important;
}

body[data-page="1"] #tabAccordion #tab-votes #reviews-list .review-reply .review-reply-body {
  font-size: 0.9rem !important;
  line-height: 1.5 !important;
  color: #475569 !important;
}


/* --- 8. Price Flow / Preisverlauf Modernisierung --- */

/* Wrapper für das Canvas Element im Preisverlauf */
body[data-page="1"] #tabAccordion #tab-priceFlow .card-body > div {
  padding: 24px !important;
  background: #f8fafc !important; /* Dezent ruhiger Hintergrund */
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  margin: 10px 0 !important;
  position: relative !important;
}

/* Canvas Element selbst */
body[data-page="1"] #tabAccordion #tab-priceFlow #priceHistoryChart {
  width: 100% !important;
  height: auto !important;
  max-height: 380px !important; /* Verhindert gequetschte/gestreckte Ansicht */
  display: block !important;
}

@media (max-width: 575px) {
  body[data-page="1"] #tabAccordion #tab-priceFlow .card-body > div {
    padding: 16px 12px !important;
  }
}

/* Empty state for Preisverlauf */
body[data-page="1"] #tabAccordion #tab-priceFlow .alert-info-premium {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 32px 24px !important;
  max-width: 500px !important;
  margin: 20px auto !important;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  text-align: center !important;
}

body[data-page="1"] #tabAccordion #tab-priceFlow .alert-info-premium i {
  font-size: 2rem !important;
  color: #94a3b8 !important; /* Soft grey/blue */
  margin-bottom: 12px !important;
  display: block !important;
}

body[data-page="1"] #tabAccordion #tab-priceFlow .alert-info-premium strong {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  margin-bottom: 6px !important;
  display: block !important;
}

body[data-page="1"] #tabAccordion #tab-priceFlow .alert-info-premium p {
  font-size: 0.875rem !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* ==========================================================================
   CATEGORY PAGE CONTAINER CENTERING FIX
   Reason: NOVA theme sets margin-left:0 on #content-wrapper when sidebar
   is present. PDP already has a fix (body[data-page="1"]). This extends
   the fix to all other pages (category, listing, search, etc.)
   ========================================================================== */
#content-wrapper {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Also ensure the two-column row does NOT restrict the container width */
body:not([data-page="1"]) #content > .row.justify-content-lg-end {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* ==========================================================================
   PHASE 1B.1: PREMIUM BASE44 OFFCANVAS CART DRAWER
   ========================================================================== */

/* Fix header stacking context to allow cart drawer to render on top of testing overlays */
header.sticky-top, .sticky-top {
  z-index: 100005 !important;
}

/* 1. Backdrop Overlay */
li.cart-icon-dropdown::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(15, 23, 42, 0.4) !important;
  backdrop-filter: blur(4px) !important;
  z-index: 99990 !important; /* Under drawer but above standard headers */
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

li.cart-icon-dropdown.show::before {
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* 2. Offcanvas Container */
#cart-dropdown-container {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: 0 !important;
  width: 420px !important;
  max-width: 100vw !important;
  height: 100vh !important;
  max-height: 100vh !important;
  z-index: 100000 !important; /* Above everything including admin/test headers */
  margin: 0 !important;
  padding: 0 !important; /* Zero padding to allow full-bleed background sections */
  background: #f8fafc !important; /* Light-grey background for middle section */
  border: none !important;
  border-radius: 0 !important;
  box-shadow: -10px 0 30px rgba(15, 23, 42, 0.15) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  
  /* Slide-in Transition */
  transform: translateX(100%) !important;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  visibility: visible !important; /* Force visibility override for Bootstrap hide */
}

/* Mobile Responsive Width */
@media (max-width: 575.98px) {
  #cart-dropdown-container {
    width: 100vw !important;
  }
}

/* Slide in when show class is added by Bootstrap dropdown */
li.cart-icon-dropdown.show #cart-dropdown-container {
  transform: translateX(0) !important;
}

/* 3. Reset Bootstrap Grid Margins inside Drawer to prevent horizontal scrollbar */
#cart-dropdown-container .row,
#cart-dropdown-container .form-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* 4. Offcanvas Header (Dark Background) */
.b44-offcanvas-header {
  background: #2d3139 !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  border-bottom: none !important;
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.b44-offcanvas-title {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
}

/* Orange Quantity Circle Badge next to Warenkorb */
.b44-header-count {
  background-color: #ea580c !important;
  color: #ffffff !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.75rem !important;
  font-weight: 700 !important;
  width: 20px !important;
  height: 20px !important;
  margin-left: 8px !important;
  line-height: 1 !important;
}

.b44-close-cart {
  background: transparent !important;
  border: none !important;
  font-size: 1.5rem !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: #94a3b8 !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: color 0.2s ease !important;
}

.b44-close-cart:hover {
  color: #ffffff !important;
}

/* 5. Shipping Progress Bar Container (White Background below header) */
.b44-shipping-progress-container {
  background: #ffffff !important;
  padding: 16px 20px !important;
  margin: 0 !important;
  border-bottom: 1px solid #e2e8f0 !important;
  flex: 0 0 auto !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.b44-shipping-progress-text {
  font-size: 0.8rem !important;
  font-weight: 500 !important;
}

.b44-shipping-progress-text strong {
  color: #0f172a !important;
  font-weight: 700 !important;
}

.b44-shipping-progress-bar-wrapper {
  height: 6px !important;
  background-color: #f1f5f9 !important;
  border-radius: 3px !important;
}

.b44-shipping-progress-bar {
  background-color: #e07b1a !important;
  border-radius: 3px !important;
}

/* 6. Middle Scrollable Product Cards Area */
#cart-dropdown-container .table-responsive {
  flex: 0 1 auto !important; /* Allow collapse when empty or few products */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100vh - 380px) !important; /* Cap height to make room for sticky sections */
  margin-bottom: 0 !important;
  padding: 16px 20px !important; /* Keep cards inset from edges */
  width: 100% !important;
  max-width: 100% !important;
  background: #f8fafc !important; /* Light-grey workspace background */
  box-sizing: border-box !important;
}

/* Scrollbar styling for a clean look */
#cart-dropdown-container .table-responsive::-webkit-scrollbar {
  width: 5px !important;
}
#cart-dropdown-container .table-responsive::-webkit-scrollbar-track {
  background: #f8fafc !important;
}
#cart-dropdown-container .table-responsive::-webkit-scrollbar-thumb {
  background: #cbd5e1 !important;
  border-radius: 4px !important;
}

/* 7. Product Cards (White background cards) */
#cart-dropdown-container table.dropdown-cart-items thead {
  display: none !important;
}

#cart-dropdown-container table.dropdown-cart-items {
  width: 100% !important;
  max-width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 10px !important;
  background: transparent !important;
  margin: 0 !important;
  table-layout: fixed !important; /* Force browser to respect widths and prevent horizontal overflow */
}

#cart-dropdown-container table.dropdown-cart-items tbody,
#cart-dropdown-container table.dropdown-cart-items tbody tr {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#cart-dropdown-container table.dropdown-cart-items tbody tr {
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important; /* White product card */
  border: 1px solid #f1f5f9 !important; /* Extremely soft, premium border */
  border-radius: 10px !important;
  padding: 12px !important;
  margin-bottom: 10px !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.02) !important; /* Soft, premium shadow */
  transition: all 0.2s ease !important;
}

#cart-dropdown-container table.dropdown-cart-items tbody tr:hover {
  border-color: #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

#cart-dropdown-container table.dropdown-cart-items td {
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* First Column: Product Image & Details */
#cart-dropdown-container table.dropdown-cart-items td:first-child {
  flex: 1 1 auto !important;
  min-width: 0 !important; /* Allow the flex child to shrink properly */
}

#cart-dropdown-container table.dropdown-cart-items td:first-child .form-row {
  display: flex !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  width: 100% !important;
  position: relative !important; /* Stacking context for absolute badge */
}

#cart-dropdown-container table.dropdown-cart-items td:first-child .form-row > .col-auto:first-child {
  padding: 0 !important;
  flex: 0 0 auto !important;
  position: relative !important; /* Stacking context for absolute badge */
}

#cart-dropdown-container table.dropdown-cart-items td:first-child .form-row > .col-auto {
  padding: 0 !important;
  flex: 0 0 auto !important;
}

#cart-dropdown-container table.dropdown-cart-items td:first-child .form-row > .col {
  padding: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important; /* Prevent text column from causing overflow */
}

/* Product Image: 60x60 square */
#cart-dropdown-container table.dropdown-cart-items .img-sm {
  width: 60px !important;
  height: 60px !important;
  object-fit: cover !important;
  border-radius: 6px !important;
  border: 1px solid #f1f5f9 !important;
  margin-right: 16px !important; /* Generous spacing to title */
  display: block !important;
}

/* Product Quantity Badge: Shopify-style absolute overlay top-right of image */
#cart-dropdown-container table.dropdown-cart-items td:first-child .form-row > .col-auto:nth-child(2) {
  position: absolute !important;
  top: -6px !important;
  left: 48px !important; /* Overlays top-right corner of 60x60 image */
  z-index: 10 !important;
  font-size: 0.65rem !important;
  font-weight: 700 !important;
  color: #1e293b !important; /* Quiet slate text */
  background: #f1f5f9 !important; /* Soft grey background */
  border: 1px solid #e2e8f0 !important;
  padding: 2px 6px !important;
  border-radius: 9999px !important; /* Pill style */
  margin: 0 !important;
  white-space: nowrap !important;
  display: inline-block !important;
  line-height: 1 !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

/* Product Title Link */
#cart-dropdown-container table.dropdown-cart-items td:first-child .form-row > .col:nth-child(3) {
  min-width: 0 !important;
}

#cart-dropdown-container table.dropdown-cart-items td:first-child .form-row > .col:nth-child(3) a {
  font-size: 0.85rem !important;
  font-weight: 500 !important; /* Clean, not aggressive */
  color: #1e293b !important; /* Dark premium slate */
  line-height: 1.35 !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  padding-right: 8px !important;
  word-break: break-word !important;
}

#cart-dropdown-container table.dropdown-cart-items td:first-child .form-row > .col:nth-child(3) a:hover {
  color: #0f172a !important; /* Clean dark grey hover */
}

/* Price Column */
#cart-dropdown-container table.dropdown-cart-items td.text-right-util {
  flex: 0 0 auto !important;
  text-align: right !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  padding-left: 8px !important;
  white-space: nowrap !important;
}

/* 8. Sticky Footer Area (White background) */
#cart-dropdown-container .dropdown-body {
  flex: 1 0 auto !important; /* Stretch to fill remaining height with white background */
  border-top: 1px solid #e2e8f0 !important;
  padding: 20px !important;
  background: #ffffff !important;
  margin-top: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Make sure all plugin containers (like PayPal button, payment messages, etc.) fit */
#cart-dropdown-container .dropdown-body * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Totals List styling */
#cart-dropdown-container .dropdown-body ul {
  margin-bottom: 16px !important;
  padding-left: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

#cart-dropdown-container .dropdown-body li {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  font-size: 0.85rem !important;
  color: #64748b !important;
  margin-bottom: 0 !important;
  line-height: 1.4 !important;
}

/* Total Sum: Zwischensumme / Gesamt (Reordered to top via order) */
#cart-dropdown-container .dropdown-body li.b44-total-sum {
  font-size: 0.95rem !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  margin-bottom: 2px !important;
  order: 1 !important;
}

#cart-dropdown-container .dropdown-body li.b44-total-sum .cart-dropdown-total-item-price {
  font-size: 1.1rem !important;
  color: #e07b1a !important; /* Bold Brand Orange */
  font-weight: 700 !important;
}

/* Tax Line (inkl. MwSt) - order: 2 */
#cart-dropdown-container .dropdown-body li.b44-total-tax {
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
  order: 2 !important;
}

#cart-dropdown-container .dropdown-body li.b44-total-tax .cart-dropdown-total-item-price {
  font-size: 0.75rem !important;
  color: #94a3b8 !important;
  font-weight: 500 !important;
}

/* Shipping Costs line - order: 3 */
#cart-dropdown-container .dropdown-body li.b44-total-shipping {
  font-size: 0.75rem !important;
  color: #64748b !important;
  display: block !important;
  text-align: left !important;
  margin-top: 4px !important;
  border-top: 1px dashed #e2e8f0 !important;
  padding-top: 6px !important;
  order: 3 !important;
}

#cart-dropdown-container .dropdown-body li.b44-total-shipping a {
  color: #64748b !important;
  text-decoration: underline !important;
}

#cart-dropdown-container .dropdown-body li.b44-total-shipping a:hover {
  color: #0f172a !important;
}

/* Hide net sum if present since gross is standard */
#cart-dropdown-container .dropdown-body li.b44-total-net {
  display: none !important;
}

/* 9. Action Buttons (Stacked Vertically, Premium styled) */
#cart-dropdown-container .cart-dropdown-buttons {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  gap: 8px !important;
  width: 100% !important;
}

#cart-dropdown-container .cart-dropdown-buttons > .col {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

/* Stack Swap: "Zum Warenkorb" at top (order:1), "Zur Kasse" below (order:2) */
#cart-dropdown-container .cart-dropdown-buttons > div:first-child {
  order: 2 !important; /* Wrapper for Zur Kasse */
}

#cart-dropdown-container .cart-dropdown-buttons > div:nth-child(2) {
  order: 1 !important; /* Wrapper for Zum Warenkorb */
}

/* Secondary Button: Zum Warenkorb (Top outline button) */
#cart-dropdown-container .cart-dropdown-buttons .btn-primary:not(.cart-dropdown-next) {
  background: #ffffff !important;
  border: 1px solid #e07b1a !important;
  color: #e07b1a !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

#cart-dropdown-container .cart-dropdown-buttons .btn-primary:not(.cart-dropdown-next):hover {
  background: #fff7ed !important;
  color: #c86c13 !important;
  border-color: #c86c13 !important;
}

/* Primary Button: Zur Kasse (Bottom orange button with arrow) */
#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next {
  background: #e07b1a !important;
  border: 1px solid #e07b1a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.2s ease !important;
}

#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next::after {
  content: " →" !important;
  display: inline-block !important;
  margin-left: 6px !important;
  transition: transform 0.2s ease !important;
}

#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next:hover {
  background: #c86c13 !important;
  border-color: #c86c13 !important;
  color: #ffffff !important;
}

#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next:hover::after {
  transform: translateX(3px) !important;
}

/* Continue shopping link wrapper */
.b44-continue-shopping-wrapper {
  margin-top: 12px !important;
  width: 100% !important;
  text-align: center !important;
}

.b44-continue-shopping-wrapper a {
  font-size: 0.8rem !important;
  color: #64748b !important;
  text-decoration: underline !important;
  transition: color 0.2s ease !important;
}

.b44-continue-shopping-wrapper a:hover {
  color: #0f172a !important;
}

/* 10. Trust Line (Slate text, warm orange icons, premium spacing) */
#cart-dropdown-container .b44-trust-line {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  font-size: 0.72rem !important; /* Slightly larger, more visible */
  color: #475569 !important; /* Highly readable slate-600 */
  margin-top: 24px !important; /* Retained premium spacing */
  margin-bottom: 4px !important;
  font-weight: 500 !important;
  border-top: 1px solid #f1f5f9 !important; /* Decoupling border line */
  padding-top: 14px !important;
  width: 100% !important;
}

#cart-dropdown-container .b44-trust-line i {
  color: #e07b1a !important; /* Warm brand orange icons */
  margin-right: 4px !important;
  font-size: 0.72rem !important;
}

#cart-dropdown-container .b44-trust-line span.mx-1 {
  display: none !important; /* Hide old pipe separators, rely on gap */
}

/* 11. Shipping Info Box (Compact grey container) */
#cart-dropdown-container .cart-dropdown-shipping-notice {
  background: #f8fafc !important; /* Neutral background matching middle area */
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  margin-top: 12px !important;
  font-size: 0.72rem !important;
  line-height: 1.3 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#cart-dropdown-container .cart-dropdown-shipping-notice i {
  color: #e07b1a !important;
}

/* 12. Hide Express/PayPal/Amazon Checkout Buttons inside Drawer */
#cart-dropdown-container [id*="paypal"],
#cart-dropdown-container [class*="paypal"],
#cart-dropdown-container [id*="amazon"],
#cart-dropdown-container [class*="amazon"],
#cart-dropdown-container .paypal-button-container,
#cart-dropdown-container .ppc-button-wrapper,
#cart-dropdown-container .amazon-pay-button,
#cart-dropdown-container [class*="payment-banner"],
#cart-dropdown-container #ppc-paypal-button-custom-miniCart-wrapper,
#cart-dropdown-container #paypal-button-miniCart-container {
  display: none !important;
}

/* 13. Empty State Styling */
.cart-dropdown-empty-wrapper {
  padding: 40px 20px !important;
  text-align: center !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  background: #f8fafc !important;
  box-sizing: border-box !important;
}

.cart-dropdown-empty-wrapper i {
  color: #cbd5e1 !important;
  margin-bottom: 16px !important;
}

.cart-dropdown-empty-wrapper p {
  font-size: 0.9rem !important;
  color: #64748b !important;
  margin-bottom: 20px !important;
}

.cart-dropdown-empty-wrapper .btn-primary {
  background: #e07b1a !important;
  border-color: #e07b1a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

.cart-dropdown-empty-wrapper .btn-primary:hover {
  background: #c86c13 !important;
  border-color: #c86c13 !important;
}
#cart-dropdown-container .cart-dropdown-buttons {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  gap: 8px !important;
  width: 100% !important;
}

#cart-dropdown-container .cart-dropdown-buttons > .col {
  padding: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  flex: none !important;
}

/* Stack Swap: "Zum Warenkorb" at top (order:1), "Zur Kasse" below (order:2) */
#cart-dropdown-container .cart-dropdown-buttons > div:first-child {
  order: 2 !important; /* Wrapper for Zur Kasse */
}

#cart-dropdown-container .cart-dropdown-buttons > div:nth-child(2) {
  order: 1 !important; /* Wrapper for Zum Warenkorb */
}

/* Secondary Button: Zum Warenkorb (Top outline button) */
#cart-dropdown-container .cart-dropdown-buttons .btn-primary:not(.cart-dropdown-next) {
  background: #ffffff !important;
  border: 1px solid #e07b1a !important;
  color: #e07b1a !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  box-shadow: none !important;
  transition: all 0.2s ease !important;
}

#cart-dropdown-container .cart-dropdown-buttons .btn-primary:not(.cart-dropdown-next):hover {
  background: #fff7ed !important;
  color: #c86c13 !important;
  border-color: #c86c13 !important;
}

/* Primary Button: Zur Kasse (Bottom orange button with arrow) */
#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next {
  background: #e07b1a !important;
  border: 1px solid #e07b1a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  width: 100% !important;
  display: block !important;
  text-align: center !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
  transition: all 0.2s ease !important;
}

#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next::after {
  content: " →" !important;
  display: inline-block !important;
  margin-left: 6px !important;
  transition: transform 0.2s ease !important;
}

#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next:hover {
  background: #c86c13 !important;
  border-color: #c86c13 !important;
  color: #ffffff !important;
}

#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next:hover::after {
  transform: translateX(3px) !important;
}

/* Continue shopping link wrapper */
.b44-continue-shopping-wrapper {
  margin-top: 12px !important;
  width: 100% !important;
  text-align: center !important;
}

.b44-continue-shopping-wrapper a {
  font-size: 0.8rem !important;
  color: #64748b !important;
  text-decoration: underline !important;
  transition: color 0.2s ease !important;
}

.b44-continue-shopping-wrapper a:hover {
  color: #0f172a !important;
}

/* 10. Trust Line (Slate text, warm orange icons, premium spacing) */
#cart-dropdown-container .b44-trust-line {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  font-size: 0.72rem !important; /* Slightly larger, more visible */
  color: #475569 !important; /* Highly readable slate-600 */
  margin-top: 24px !important; /* Retained premium spacing */
  margin-bottom: 4px !important;
  font-weight: 500 !important;
  border-top: 1px solid #f1f5f9 !important; /* Decoupling border line */
  padding-top: 14px !important;
  width: 100% !important;
}

#cart-dropdown-container .b44-trust-line i {
  color: #e07b1a !important; /* Warm brand orange icons */
  margin-right: 4px !important;
  font-size: 0.72rem !important;
}

#cart-dropdown-container .b44-trust-line span.mx-1 {
  display: none !important; /* Hide old pipe separators, rely on gap */
}

/* 11. Shipping Info Box (Compact grey container) */
#cart-dropdown-container .cart-dropdown-shipping-notice {
  background: #f8fafc !important; /* Neutral background matching middle area */
  border: 1px solid #e2e8f0 !important;
  color: #475569 !important;
  padding: 8px 12px !important;
  border-radius: 6px !important;
  margin-top: 12px !important;
  font-size: 0.72rem !important;
  line-height: 1.3 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

#cart-dropdown-container .cart-dropdown-shipping-notice i {
  color: #e07b1a !important;
}

/* 12. Hide Express/PayPal/Amazon Checkout Buttons inside Drawer */
#cart-dropdown-container [id*="paypal"],
#cart-dropdown-container [class*="paypal"],
#cart-dropdown-container [id*="amazon"],
#cart-dropdown-container [class*="amazon"],
#cart-dropdown-container .paypal-button-container,
#cart-dropdown-container .ppc-button-wrapper,
#cart-dropdown-container .amazon-pay-button,
#cart-dropdown-container [class*="payment-banner"],
#cart-dropdown-container #ppc-paypal-button-custom-miniCart-wrapper,
#cart-dropdown-container #paypal-button-miniCart-container {
  display: none !important;
}

/* 13. Empty State Styling */
.cart-dropdown-empty-wrapper {
  padding: 40px 20px !important;
  text-align: center !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  background: #f8fafc !important;
  box-sizing: border-box !important;
}

.cart-dropdown-empty-wrapper i {
  color: #cbd5e1 !important;
  margin-bottom: 16px !important;
}

.cart-dropdown-empty-wrapper p {
  font-size: 0.9rem !important;
  color: #64748b !important;
  margin-bottom: 20px !important;
}

.cart-dropdown-empty-wrapper .btn-primary {
  background: #e07b1a !important;
  border-color: #e07b1a !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

.cart-dropdown-empty-wrapper .btn-primary:hover {
  background: #c86c13 !important;
  border-color: #c86c13 !important;
}




/* =========================================================
   Warenkorb 2A.2 - Modern Cart Redesign Layout CSS (Base44 / Shopify Premium Style)
   ========================================================= */
.b44-basket-container {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    color: #1e293b !important;
    max-width: 1180px !important;
    margin: 40px auto 80px !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}

.b44-basket-heading-main {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    letter-spacing: -0.025em !important;
    font-size: 2.25rem !important;
    margin-bottom: 24px !important;
}

/* Shipping Progress Bar */
.b44-shipping-progress-container {
    background-color: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    padding: 16px 20px !important;
    margin-bottom: 30px !important;
}
.b44-shipping-progress-text {
    font-size: 0.9rem !important;
    color: #475569 !important;
}
.b44-shipping-progress-text strong {
    color: #ea580c !important;
    font-weight: 600 !important;
}
.b44-shipping-progress-bar-wrapper {
    background-color: #f1f5f9 !important;
    border-radius: 9999px !important;
    height: 6px !important;
    overflow: hidden !important;
}
.b44-shipping-progress-bar {
    background-color: #ea580c !important;
    height: 100% !important;
    border-radius: 9999px !important;
    transition: width 0.4s ease !important;
}

/* Main Layout Grid */
.b44-basket-main-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px !important;
    gap: 24px !important;
    margin: 0 !important;
    align-items: start !important;
    width: 100% !important;
}

/* Reset default BS column behaviors for our grid children */
.b44-basket-left-col,
.b44-basket-right-col {
    max-width: 100% !important;
    flex: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin-top: 0 !important;
}

.b44-basket-left-col .basket_wrapper,
.b44-basket-left-col #cart-form,
.b44-basket-left-col .basket-items {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Hide default headers and lines */
.b44-basket-container .cart-items-header,
.b44-basket-container .basket-items hr,
.b44-basket-container .basket-items .col-12 hr {
    display: none !important;
}

.b44-basket-container .basket_wrapper {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

/* Modern Card Layout for each Cart Item */
.b44-cart-item-row {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.02), 0 1px 2px -1px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease-in-out !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 128px !important;
}

.b44-cart-item-row:first-of-type {
    margin-top: 0 !important;
}

.b44-cart-item-row:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05) !important;
    border-color: #cbd5e1 !important;
}

/* Thumbnail Column */
.b44-cart-item-row .cart-items-image {
    width: 80px !important;
    max-width: 80px !important;
    flex: 0 0 80px !important;
    margin-right: 16px !important;
    padding: 0 !important;
    display: block !important;
}
.b44-cart-item-row .cart-items-image img,
.b44-cart-item-row .cart-items-image picture,
.b44-cart-item-row .cart-items-image .img-aspect-ratio {
    width: 80px !important;
    max-width: 80px !important;
    height: 80px !important;
    max-height: 80px !important;
    object-fit: contain !important;
    border-radius: 8px !important;
    border: 1px solid #f1f5f9 !important;
    background: #ffffff !important;
    padding-bottom: 0 !important;
}

/* Content Columns (Middle/Right Grid) */
.b44-cart-item-row > div.col {
    flex: 1 1 auto !important;
    padding: 0 !important;
    display: block !important;
}

.b44-cart-item-row .align-items-baseline {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto 1fr auto !important;
    grid-template-areas:
        "info total-price"
        "unit-price total-price"
        "details delete"
        "qty delete" !important;
    gap: 4px 16px !important;
    width: 100% !important;
    align-items: stretch !important;
    margin: 0 !important;
    height: 100% !important;
}

/* Assign Grid Areas */
.b44-item-info-col {
    grid-area: info !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
}
.b44-item-unit-price-col {
    grid-area: unit-price !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    text-align: left !important;
}
.b44-item-details-col {
    grid-area: details !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    max-height: 75px !important;
    overflow: hidden !important;
}
.b44-item-qty-col {
    grid-area: qty !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: auto !important;
    align-self: end !important;
}
.b44-item-total-price-col {
    grid-area: total-price !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    text-align: right !important;
    align-self: start !important;
}
.b44-item-delete-col {
    grid-area: delete !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 0 !important;
    display: flex !important;
    align-items: flex-end !important;
    align-self: end !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-top: auto !important;
}

/* Title Typography */
.b44-cart-item-row .cart-items-name {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    line-height: 1.3 !important;
    text-decoration: none !important;
    transition: color 0.15s ease !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 !important;
    max-height: 2.6em !important;
}
.b44-cart-item-row .cart-items-name:hover {
    color: #e07b1a !important;
}

/* Unit Price Typography */
.b44-cart-item-row .cart-items-single-price {
    font-size: 0.82rem !important;
    color: #64748b !important;
    font-weight: 400 !important;
}
.b44-cart-item-row .cart-items-single-price .cart-items-price-text {
    display: none !important;
}

/* Total Price Typography */
.b44-cart-item-row .price_overall {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}
.b44-cart-item-row .cart-items-price-text {
    display: none !important;
}

/* Technical Data details */
.b44-cart-item-row ul.list-unstyled {
    margin: 2px 0 !important;
    padding: 0 !important;
    color: #64748b !important;
    font-size: 0.78rem !important;
    line-height: 1.25 !important;
}
.b44-cart-item-row ul.list-unstyled li {
    margin-bottom: 1px !important;
}
.b44-cart-item-row ul.list-unstyled li strong {
    font-weight: 500 !important;
    color: #475569 !important;
}

/* Config and Partlist sub-items */
.b44-cart-item-row ul.config-items,
.b44-cart-item-row ul.partlist-items {
    margin: 4px 0 !important;
    padding-left: 12px !important;
    color: #64748b !important;
    font-size: 0.76rem !important;
}
.b44-cart-item-row ul.config-items li,
.b44-cart-item-row ul.partlist-items li {
    margin-bottom: 2px !important;
}

/* Quantity Stepper (Shopify-like) */
.b44-cart-item-row .qty-wrapper {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    height: 32px !important;
    max-width: 100px !important;
    overflow: hidden !important;
}
.b44-cart-item-row .qty-wrapper .input-group {
    border: none !important;
    background: none !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
}
.b44-cart-item-row .qty-wrapper button {
    background: none !important;
    border: none !important;
    color: #64748b !important;
    width: 28px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.75rem !important;
    padding: 0 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}
.b44-cart-item-row .qty-wrapper button:hover {
    color: #e07b1a !important;
    background-color: #f1f5f9 !important;
}
.b44-cart-item-row .qty-wrapper input.quantity {
    border: none !important;
    background: none !important;
    color: #0f172a !important;
    font-weight: 600 !important;
    text-align: center !important;
    width: 32px !important;
    height: 100% !important;
    font-size: 0.85rem !important;
    padding: 0 !important;
    margin: 0 !important;
}
.b44-cart-item-row .qty-wrapper input.quantity::-webkit-outer-spin-button,
.b44-cart-item-row .qty-wrapper input.quantity::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.b44-cart-item-row .qty-wrapper input.quantity[type=number] {
    -moz-appearance: textfield;
}

/* Actions (Delete/Wishlist) styling */
.b44-item-delete-col button,
.b44-item-delete-col .btn,
.b44-item-delete-col .cart-items-delete-button {
    background: none !important;
    border: none !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #64748b !important;
    padding: 6px 10px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
    box-shadow: none !important;
    margin: 0 !important;
    text-decoration: none !important;
}

.b44-item-delete-col button:hover,
.b44-item-delete-col .btn:hover {
    color: #e07b1a !important;
    background-color: #fff7ed !important;
    text-decoration: none !important;
}

.b44-item-delete-col .cart-items-delete-button {
    color: #64748b !important;
}

.b44-item-delete-col .cart-items-delete-button:hover {
    color: #ef4444 !important;
    background-color: #fee2e2 !important;
}

.b44-item-delete-col button span,
.b44-item-delete-col .btn span,
.b44-item-delete-col .cart-items-delete-button span {
    font-size: 0.85rem !important;
    margin-right: 6px !important;
}

/* Sticky Summary Column */
.b44-sticky-summary {
    position: sticky !important;
    top: 30px !important;
    z-index: 100 !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Summary & Coupon Cards (Premium Look) */
.b44-coupon-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
    padding: 16px 20px !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
}

.b44-summary-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    padding: 30px !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
}

.b44-coupon-card:first-of-type {
    margin-top: 0 !important;
}

.b44-coupon-card .card-body, .b44-summary-card .card-body {
    padding: 0 !important;
    background: none !important;
}

.b44-summary-card .b44-card-title {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.02em !important;
}

/* Coupon input group */
.b44-coupon-form .b44-input-group {
    display: flex !important;
    align-items: center !important;
}
.b44-coupon-form .b44-input {
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    height: 38px !important;
    padding: 8px 12px !important;
    font-size: 0.85rem !important;
    color: #0f172a !important;
    background-color: #ffffff !important;
    margin-right: 8px !important;
    width: 100% !important;
}
.b44-coupon-form .b44-input:focus {
    border-color: #e07b1a !important;
    outline: none !important;
    box-shadow: 0 0 0 1px #e07b1a !important;
}
.b44-coupon-form .b44-btn-ok {
    height: 38px !important;
    background-color: #0f172a !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    border-radius: 6px !important;
    padding: 0 16px !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}
.b44-coupon-form .b44-btn-ok:hover {
    background-color: #1e293b !important;
}

/* Order Totals Rows */
.b44-summary-rows .b44-summary-row {
    display: flex !important;
    justify-content: space-between !important;
    font-size: 0.9rem !important;
    color: #475569 !important;
    margin-bottom: 10px !important;
}
.b44-summary-rows .b44-tax-row,
.b44-summary-rows .b44-shipping-row {
    font-size: 0.82rem !important;
    color: #64748b !important;
    margin-bottom: 8px !important;
}

.b44-summary-divider {
    border-top: 1px solid #e5e7eb !important;
    margin: 16px 0 !important;
}

.b44-total-row {
    margin-top: 18px !important;
    margin-bottom: 24px !important;
}
.b44-total-row span {
    font-size: 1.05rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}
.b44-total-row strong,
.b44-total-row .total-sum {
    font-size: 1.75rem !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    letter-spacing: -0.03em !important;
}

/* Checkout CTA Button (Explicitly override BS/JTL negative margins) */
.b44-summary-card #cart-checkout-btn,
.b44-summary-card .b44-btn-checkout {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background-color: #e07b1a !important;
    border: 1px solid #e07b1a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    border-radius: 8px !important;
    padding: 14px 20px !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out !important;
    cursor: pointer !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    box-sizing: border-box !important;
    float: none !important;
}
.b44-summary-card #cart-checkout-btn:hover,
.b44-summary-card .b44-btn-checkout:hover {
    background-color: #c9670f !important;
    border-color: #c9670f !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* PayPal Button override alignment - Trennung und Freiraum */
.b44-summary-card [id*="paypal-button"],
.b44-summary-card [id*="ppc-paypal-button"],
.b44-summary-card .paypal-button-container,
.b44-summary-card .zoid-outlet {
    margin-top: 24px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.b44-summary-card .paypal-button-container {
    border-top: 1px dashed #e2e8f0 !important;
    padding-top: 20px !important;
}

/* Safeguard hidden default inputs from JTL form */
.btn-hidden-default,
input[name="fake"] {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Secondary CTA / Continue shopping */
.b44-continue-shopping-link-wrapper {
    margin-top: 16px !important;
    text-align: center !important;
}
.b44-link-continue {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 44px !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
}
.b44-link-continue:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

/* Trust Line under CTA */
.b44-trust-line {
    border-top: 1px solid #e5e7eb !important;
    margin-top: 20px !important;
    padding-top: 16px !important;
    font-size: 0.82rem !important;
    color: #64748b !important;
    font-weight: 500 !important;
    text-align: center !important;
}
.b44-trust-line i {
    color: #94a3b8 !important;
    margin-right: 4px !important;
}

/* Weight info */
.basket-summary-notice-weight-wrapper {
    font-size: 0.78rem !important;
    color: #94a3b8 !important;
    text-align: center !important;
    margin-top: 12px !important;
}

/* Cross-Selling Slider & Grid Styles */
.b44-xsell-container {
    width: 100% !important;
    max-width: 1240px !important;
    margin: 50px auto 0 !important;
    box-sizing: border-box !important;
}
.b44-xsell-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    margin-top: 20px !important;
}
.b44-xsell-card {
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    padding: 16px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.02) !important;
}
.b44-xsell-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.04), 0 4px 6px -2px rgba(0, 0, 0, 0.02) !important;
    border-color: #cbd5e1 !important;
}
.b44-xsell-image-wrapper {
    width: 100% !important;
    height: 140px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 12px !important;
    overflow: hidden !important;
}
.b44-xsell-image-wrapper img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    transition: transform 0.2s ease !important;
}
.b44-xsell-card:hover .b44-xsell-image-wrapper img {
    transform: scale(1.04) !important;
}
.b44-xsell-content {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
}
.b44-xsell-category {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #ea580c !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 4px !important;
}
.b44-xsell-title {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    line-height: 1.4 !important;
    margin: 0 0 12px 0 !important;
    min-height: 38px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}
.b44-xsell-title a {
    color: #1e293b !important;
    text-decoration: none !important;
}
.b44-xsell-title a:hover {
    color: #e07b1a !important;
}
.b44-xsell-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: auto !important;
    padding-top: 8px !important;
    border-top: 1px solid #f1f5f9 !important;
}
.b44-xsell-price {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}
.b44-xsell-buy-form {
    margin: 0 !important;
    padding: 0 !important;
}
.b44-xsell-buy-btn {
    width: 32px !important;
    height: 32px !important;
    background-color: #ea580c !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
    font-size: 0.8rem !important;
}
.b44-xsell-buy-btn:hover {
    background-color: #c9670f !important;
}

/* =========================================================
   Responsive Grid & Fallbacks (Mobile / Tablet)
   ========================================================= */
@media (max-width: 991.98px) {
    .b44-basket-main-row {
        grid-template-columns: 100% !important;
        gap: 20px !important;
    }
    
    .b44-sticky-summary {
        position: static !important;
        margin-top: 10px !important;
    }
    
    .b44-btn-checkout {
        font-size: 0.95rem !important;
        padding: 12px 16px !important;
    }
    
    .b44-xsell-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }
}

@media (max-width: 767.98px) {
    .b44-basket-container {
        padding: 0 12px !important;
        margin: 20px auto 40px !important;
    }
    .b44-basket-heading-main {
        font-size: 1.75rem !important;
        margin-bottom: 16px !important;
    }
    
    .b44-cart-item-row {
        padding: 16px !important;
        align-items: stretch !important;
        min-height: 128px !important;
    }
    
    .b44-cart-item-row .cart-items-image {
        width: 80px !important;
        max-width: 80px !important;
        flex: 0 0 80px !important;
        margin-right: 14px !important;
    }
    .b44-cart-item-row .cart-items-image img {
        width: 80px !important;
        height: 80px !important;
    }
    
    .b44-cart-item-row .align-items-baseline {
        display: grid !important;
        grid-template-columns: 1fr auto !important;
        grid-template-rows: auto auto 1fr auto !important;
        grid-template-areas:
            "info total-price"
            "unit-price total-price"
            "details details"
            "qty delete" !important;
        gap: 6px 12px !important;
        align-items: stretch !important;
        height: 100% !important;
    }
    
    .b44-item-qty-col {
        margin-top: auto !important;
        align-self: end !important;
    }
    
    .b44-cart-item-row .price_overall {
        font-size: 1rem !important;
    }
    
    .b44-xsell-grid {
        grid-template-columns: 100% !important;
        gap: 12px !important;
    }
}

/* --- Premium Shipping Link / Pill Styling --- */
.b44-shipping-row a {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    color: #475569 !important;
    padding: 1px 7px !important;
    border-radius: 9999px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 2px !important;
}

.b44-shipping-row a:hover {
    background-color: #e2e8f0 !important;
    color: #0f172a !important;
    border-color: #cbd5e1 !important;
    text-decoration: none !important;
}

/* --- Premium Shipping Row Panel --- */
.b44-shipping-row-premium {
    border: 1px solid #e2e8f0 !important;
    background-color: #f8fafc !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    margin-bottom: 8px !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
}

/* Style the JTL shipping link inside the premium box as a modern pill */
.b44-shipping-row-premium a {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    padding: 0px 6px !important;
    border-radius: 9999px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    margin: 0 1px !important;
    vertical-align: middle !important;
}

.b44-shipping-row-premium a:hover {
    background-color: #f1f5f9 !important;
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    text-decoration: none !important;
}

/* --- Trust Block in Bestellübersicht --- */
.b44-summary-trust-block {
    background-color: #f8fafc !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    margin-top: 18px !important;
    margin-bottom: 12px !important;
}
.b44-trust-item {
    display: flex !important;
    align-items: center !important;
    font-size: 0.78rem !important;
    color: #475569 !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    line-height: 1.2 !important;
}
.b44-trust-item:last-child {
    margin-bottom: 0 !important;
}
.b44-trust-item span.fa-check {
    color: #10b981 !important;
    font-size: 0.75rem !important;
    margin-right: 8px !important;
}

/* --- Mobile Responsiveness --- */
@media (max-width: 767px) {
    .b44-summary-card {
        padding: 20px !important;
        border-radius: 12px !important;
    }
    .b44-total-row .total-sum {
        font-size: 1.5rem !important;
    }
}

/* Align right column top edge with first product card on desktop */
@media (min-width: 992px) {
    .b44-basket-right-col {
        margin-top: 0 !important;
    }
}

/* Hide the dummy button in cart-form to prevent vertical offset */
#cart-form button.btn-hidden-default,
#cart-form button[name="fake"],
#cart-form .btn-hidden {
    display: none !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    visibility: hidden !important;
}

/* Cart Item Row Equal Visual Height Layout */
.b44-cart-item-row {
    min-height: 140px !important; /* Ensure a consistent base height */
}

/* Ensure actions and quantity stepper are always pushed to the bottom of the grid row */
.b44-item-qty-col {
    margin-top: auto !important;
    align-self: end !important;
}
.b44-item-delete-col {
    margin-top: auto !important;
    align-self: end !important;
}

/* Dominant Action Checkout Button */
.b44-btn-checkout {
    margin-bottom: 24px !important; /* At least 24px spacing below the checkout button */
}

/* Reset PayPal container wrappers to prevent any empty gray boxes or lines */
#ppc-paypal-button-custom-cart-wrapper,
#paypal-button-cart-container {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
}

/* Position active PayPal Custom Express button wrapper under checkout */
#ppc-paypal-button-custom-cart-wrapper {
    margin-top: 12px !important;
}

/* Position active PayPal SDK container under checkout/custom button */
#paypal-button-cart-container {
    margin-top: 12px !important;
}

/* Trust Box Refinement & Integration */
.b44-summary-trust-block {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 20px 18px !important;
    margin-top: 24px !important;
    margin-bottom: 12px !important;
    box-sizing: border-box !important;
}

.b44-trust-item {
    font-size: 0.82rem !important; /* Higher readability font size */
    color: #334155 !important; /* Slate-700 for better contrast */
    font-weight: 500 !important;
    margin-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
    line-height: 1.3 !important;
}

.b44-trust-item:last-of-type {
    margin-bottom: 0 !important;
}

.b44-trust-item span.fa-check {
    color: #10b981 !important; /* Premium Emerald Green checkmarks */
    font-size: 14px !important; /* Enhanced icon size */
    margin-right: 10px !important;
}

/* Divider inside Trust Box */
.b44-summary-trust-divider {
    border-top: 1px solid #e2e8f0 !important;
    margin: 16px 0 !important;
    width: 100% !important;
}

/* Continue Shopping styling inside the Trust Box */
.b44-continue-shopping-inside {
    width: 100% !important;
    box-sizing: border-box !important;
}

.b44-continue-shopping-inside .b44-link-continue {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 40px !important;
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out !important;
    box-sizing: border-box !important;
}

.b44-continue-shopping-inside .b44-link-continue:hover {
    background-color: #f8fafc !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

/* Modernized Shipping Pill inside Premium Row */
.b44-shipping-row-premium a {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #e2e8f0 !important; /* Premium matte pill */
    border: 1px solid #cbd5e1 !important;
    color: #334155 !important;
    padding: 2px 8px !important;
    border-radius: 9999px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    vertical-align: middle !important;
}

.b44-shipping-row-premium a:hover {
    background-color: #cbd5e1 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

/* =========================================================
   Phase Checkout 1A - Premium Checkout Header & Centering
   ========================================================= */

/* Premium Checkout Header Styling */
.b44-checkout-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02) !important;
    padding: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1030 !important;
}

.b44-checkout-header-main {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    max-width: 1180px !important;
    margin: 0 auto !important;
    padding: 14px 20px !important;
    min-height: 70px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.b44-checkout-logo {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
}

.b44-checkout-logo img {
    height: 32px !important;
    width: auto !important;
    max-width: 180px !important;
    object-fit: contain !important;
}

.b44-checkout-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: -0.015em !important;
}

.b44-checkout-title span.fa-lock {
    color: #10b981 !important; /* Emerald Green Lock */
}

.b44-checkout-trust {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
}

.b44-checkout-trust-item {
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    color: #475569 !important;
    display: flex !important;
    align-items: center !important;
}

.b44-checkout-trust-item span.fa-check {
    color: #10b981 !important;
    margin-right: 6px !important;
}

/* Ground Layout Centering for Checkout */
body.is-checkout #content-wrapper {
    max-width: 1180px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

body.is-checkout #content {
    width: 100% !important;
    margin-top: 24px !important;
    margin-bottom: 48px !important;
}

body.is-checkout #main-wrapper {
    padding-top: 32px !important;
    padding-bottom: 64px !important;
    background-color: var(--b44-canvas) !important;
}

/* --- Phase Checkout 1: Stepper, Cards & Buttons --- */

/* 1. Stepper optisch auf Base44-Niveau */
body.is-checkout .stepper.checkout-steps {
  background: transparent !important;
  border: none !important;
  margin: 24px auto 36px auto !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  position: relative !important;
  max-width: 800px !important;
  width: 100% !important;
}

/* Verbindungslinie hinter den Kreisen */
body.is-checkout .stepper.checkout-steps::before {
  content: "" !important;
  position: absolute !important;
  top: 18px !important; /* Vertikal mittig zum 36px Kreis */
  left: 8% !important;
  right: 8% !important;
  height: 2px !important;
  background-color: #cbd5e1 !important; /* Hellgraue Linie */
  z-index: 1 !important;
}

/* Bulky JTL-Pfeile ausblenden */
body.is-checkout .stepper .step::after,
body.is-checkout .stepper .step::before {
  display: none !important;
}

/* Step-Kachel flexibler machen */
body.is-checkout .stepper .step {
  background: transparent !important;
  z-index: 2 !important;
  flex: 1 !important;
  display: flex !important;
  justify-content: center !important;
}

body.is-checkout .stepper .step-content {
  min-height: auto !important;
  display: flex !important;
  flex-direction: column !important; /* Kreis oben, Text unten */
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  text-align: center !important;
}

/* JTL-Standard-Aktivlinie unter dem gesamten Block verstecken */
body.is-checkout .stepper .step-active .step-content::after,
body.is-checkout .stepper .step-current .step-content::after {
  display: none !important;
}

/* Kreise (Badges) neu gestalten */
body.is-checkout .stepper .badge {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  margin: 0 !important;
  border: 2px solid #cbd5e1 !important;
  background-color: #ffffff !important;
  color: #64748b !important;
  z-index: 3 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 0 0 4px #ffffff !important; /* Weißer Abstandhalter zur Linie */
}

body.is-checkout .stepper .badge-count {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
}

/* Aktive Stufe: Orange */
body.is-checkout .stepper .step.step-current .badge {
  background-color: #e07b1a !important;
  border-color: #e07b1a !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 4px #ffffff, 0 4px 8px rgba(224, 123, 26, 0.2) !important;
}

body.is-checkout .stepper .step.step-current .step-text {
  color: #0f172a !important;
  font-weight: 700 !important;
}

/* Erledigte Stufe: Grün mit Haken */
body.is-checkout .stepper .step:has(.step-check) .badge {
  background-color: #10b981 !important; /* Smaragdgrün */
  border-color: #10b981 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 4px #ffffff !important;
}

body.is-checkout .stepper .step:has(.step-check) .badge-count {
  display: none !important; /* Zahl ausblenden */
}

/* FontAwesome Checkmark in den Kreis setzen */
body.is-checkout .stepper .step:has(.step-check) .badge::before {
  content: "\f00c" !important;
  font-family: "Font Awesome 5 Free" !important;
  font-weight: 900 !important;
  font-size: 0.85rem !important;
  color: #ffffff !important;
}

/* Standard-Haken außerhalb ausblenden */
body.is-checkout .stepper .step-check {
  display: none !important;
}

/* Stepper-Texte */
body.is-checkout .stepper .step-text {
  font-size: 0.85rem !important;
  color: #64748b !important;
  font-weight: 500 !important;
  transition: color 0.3s ease !important;
}

body.is-checkout .stepper .step:has(.step-check) .step-text {
  color: #334155 !important;
}

@media (max-width: 767.98px) {
  body.is-checkout .stepper.checkout-steps::before {
    left: 15% !important;
    right: 15% !important;
  }
}

/* 2. Versandarten & Zahlungsarten als Cards */
body.is-checkout .checkout-shipping-form-options .custom-radio,
body.is-checkout .checkout-payment-method .custom-radio {
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 16px 16px 16px 48px !important; /* Kompakteres Innenpadding */
  margin-bottom: 12px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  position: relative !important;
  display: block !important;
}

/* Hover-Effekt */
body.is-checkout .checkout-shipping-form-options .custom-radio:hover,
body.is-checkout .checkout-payment-method .custom-radio:hover {
  border-color: #cbd5e1 !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
}

/* Aktive Auswahl: Oranger Rahmen (nur :has() für die aktive Kachel, weniger dominant) */
body.is-checkout .checkout-shipping-form-options .custom-radio:has(.custom-control-input:checked),
body.is-checkout .checkout-payment-method .custom-radio:has(.custom-control-input:checked) {
  border-color: #e07b1a !important; /* Brand-Gold */
  border-width: 1.5px !important;
  padding: 15.5px 15.5px 15.5px 47.5px !important; /* padding-Ausgleich für den 1.5px Rahmen */
  box-shadow: 0 2px 8px rgba(224, 123, 26, 0.05) !important;
}

/* Label & Content Ausrichtung innerhalb der Kachel */
body.is-checkout .checkout-shipping-form-options .custom-control-label,
body.is-checkout .checkout-payment-method .custom-control-label {
  width: 100% !important;
  cursor: pointer !important;
  display: block !important;
}

/* Spalten-Layout innerhalb der Kachel für saubere Ausrichtung */
body.is-checkout .custom-radio .content,
body.is-checkout .checkout-shipping-form-options .custom-radio .content,
body.is-checkout .checkout-payment-method .custom-radio .content {
  width: 100% !important;
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

body.is-checkout .custom-radio .content > div,
body.is-checkout .checkout-shipping-form-options .custom-radio .content > div {
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

body.is-checkout .custom-radio .content > .title,
body.is-checkout .checkout-shipping-form-options .custom-radio .content > .title {
  flex: 0 0 auto !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
}

body.is-checkout .custom-radio .content > .desc,
body.is-checkout .checkout-shipping-form-options .custom-radio .content > .desc {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  text-align: left !important;
  color: #64748b !important;
  font-size: 0.85rem !important;
  margin-top: 4px !important;
}

body.is-checkout .custom-radio .content > .price-col,
body.is-checkout .checkout-shipping-form-options .custom-radio .content > .price-col {
  margin-left: auto !important;
  flex: 0 0 auto !important;
  max-width: none !important;
  text-align: right !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  font-size: 1rem !important;
}

@media (max-width: 575.98px) {
  body.is-checkout .custom-radio .content,
  body.is-checkout .checkout-shipping-form-options .custom-radio .content,
  body.is-checkout .checkout-payment-method .custom-radio .content {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
  }
  body.is-checkout .custom-radio .content > .title,
  body.is-checkout .checkout-shipping-form-options .custom-radio .content > .title,
  body.is-checkout .custom-radio .content > .desc,
  body.is-checkout .checkout-shipping-form-options .custom-radio .content > .desc {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }
  body.is-checkout .custom-radio .content > .price-col,
  body.is-checkout .checkout-shipping-form-options .custom-radio .content > .price-col {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    text-align: left !important;
    margin-left: 0 !important;
  }
}

/* Radio-Punkt exakt vertikal zentrieren */
body.is-checkout .checkout-shipping-form-options .custom-control-label::before,
body.is-checkout .checkout-shipping-form-options .custom-control-label::after,
body.is-checkout .checkout-payment-method .custom-control-label::before,
body.is-checkout .checkout-payment-method .custom-control-label::after {
  top: 50% !important;
  transform: translateY(-50%) !important;
  left: -32px !important; /* Perfekter Abstand nach links */
  margin: 0 !important;
}

/* Radio-Punkte farblich veredeln */
body.is-checkout .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #e07b1a !important;
  border-color: #e07b1a !important;
}

/* Logobilder der Zahlungs- und Versandarten angleichen */
body.is-checkout .checkout-shipping-form-options .custom-radio img,
body.is-checkout .checkout-payment-method .custom-radio img {
  max-height: 26px !important;
  width: auto !important;
  object-fit: contain !important;
  margin-right: 12px !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Details & Hinweistexte */
body.is-checkout .checkout-shipping-form-options .custom-radio .title small,
body.is-checkout .checkout-payment-method .custom-payment-method-note {
  display: block !important;
  color: #64748b !important;
  margin-top: 4px !important;
  font-size: 0.8rem !important;
  font-weight: 400 !important;
}

/* Preisangaben für Zahlungsmethoden */
body.is-checkout .checkout-payment-method .custom-radio .checkout-payment-method-badge {
  font-weight: 700 !important;
  color: #0f172a !important;
  font-size: 1rem !important;
  text-align: right !important;
}

/* PayPal Ratenzahlungs-Banner optisch beruhigen */
body.is-checkout #ppc-paypal-button-custom-cart-wrapper,
body.is-checkout .paypal-button-container {
  opacity: 0.95 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}

/* 3. Buttons harmonisch ausrichten */
body.is-checkout .checkout-button-row {
  margin-top: 24px !important;
}

body.is-checkout .checkout-button-row button,
body.is-checkout .checkout-button-row a.btn,
body.is-checkout .checkout-button-row input[type="submit"] {
  width: 100% !important;
  height: 48px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  box-sizing: border-box !important;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (max-width: 767.98px) {
  body.is-checkout .checkout-button-row > div {
    margin-bottom: 12px !important;
  }
  body.is-checkout .checkout-button-row > div:last-child {
    margin-bottom: 0 !important;
  }
}

/* Primary Submit Button ("Weiter") */
body.is-checkout .checkout-button-row button[type="submit"],
body.is-checkout .checkout-button-row .btn-primary,
body.is-checkout .checkout-button-row input[type="submit"] {
  background-color: #e07b1a !important;
  border-color: #e07b1a !important;
  color: #ffffff !important;
  box-shadow: 0 4px 12px rgba(224, 123, 26, 0.1) !important;
}

body.is-checkout .checkout-button-row button[type="submit"]:hover,
body.is-checkout .checkout-button-row .btn-primary:hover,
body.is-checkout .checkout-button-row input[type="submit"]:hover {
  background-color: #c9670f !important;
  border-color: #c9670f !important;
  box-shadow: 0 6px 16px rgba(224, 123, 26, 0.2) !important;
  transform: translateY(-1px) !important;
}

body.is-checkout .checkout-button-row button[type="submit"]:active,
body.is-checkout .checkout-button-row .btn-primary:active {
  transform: translateY(0) !important;
}

/* Secondary Button ("Zurück") */
body.is-checkout .checkout-button-row a.btn-outline-primary,
body.is-checkout .checkout-button-row button.btn-outline-primary {
  background-color: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  color: #475569 !important;
  box-shadow: none !important;
}

body.is-checkout .checkout-button-row a.btn-outline-primary:hover,
body.is-checkout .checkout-button-row button.btn-outline-primary:hover {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border-color: #94a3b8 !important;
}

/* ================================================
   CHECKOUT: Versand-/Zahlungskarten – korrekte Selektoren
   DOM-Struktur: Shipping-Parent = .radio-w-100
                 Payment-Cards  = .custom-control-inline direkt
   ================================================ */

/* Karten: großzügiges Padding, volle Breite, kein Überlauf.
   Gilt für alle .custom-radio auf der Checkout-Seite (body.is-checkout). */
body.is-checkout .custom-radio {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
    padding: 18px 24px 18px 52px !important;
    margin: 0 0 4px 0 !important;
    position: relative !important;
}

/* Radio-Kreis (::before = Ring, ::after = Punkt):
   left: -34px → 52px Padding − 34px = 18px vom linken Kartenrand
   vertikal zentriert via top:50% + transform */
body.is-checkout .custom-radio .custom-control-label::before,
body.is-checkout .custom-radio .custom-control-label::after {
    left: -34px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
}

/* Label: flex, vertikal zentriert, Logo sauber daneben */
body.is-checkout .custom-radio .custom-control-label {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding-left: 0 !important;
    cursor: pointer !important;
    min-height: 24px !important;
}

/* Shipping-Container: kein Überlauf */
body.is-checkout .radio-w-100 {
    overflow: hidden !important;
}

/* Aktive Karte: dezenter oranger Rahmen (nur für Radio-Selektion) */
body.is-checkout .custom-radio:has(input[type="radio"]:checked) {
    border: 1px solid #e07b1a !important;
    box-shadow: 0 0 0 1px #e07b1a !important;
    background-color: #fffbf7 !important;
}

/* Zahlungsarten korrigieren */
body.is-checkout .checkout-payment-method .custom-radio .custom-control-label {
    display: block !important;
}

body.is-checkout .custom-radio .paypal-mark {
    display: inline-block !important;
    vertical-align: middle !important;
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
}

body.is-checkout .custom-radio .paypal-mark img {
    margin-right: 0 !important;
    display: block !important;
}

body.is-checkout .custom-radio .funding-name {
    display: inline-block !important;
    vertical-align: middle !important;
    margin-left: 16px !important;
    width: auto !important;
    flex: 0 0 auto !important;
    max-width: none !important;
}

body.is-checkout .custom-radio .checkout-payment-method-note,
body.is-checkout .checkout-payment-method .checkout-payment-method-note {
    display: block !important;
    margin-top: 4px !important;
    margin-left: 0 !important;
    max-width: 520px !important;
}

/* Versandarten korrigieren */
body.is-checkout .custom-radio .content {
    display: flex !important;
    flex-flow: row wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    width: 100% !important;
}

body.is-checkout .custom-radio .content > div:first-child,
body.is-checkout .custom-radio .content > *:first-child {
    flex: 0 1 auto !important;
    max-width: none !important;
    width: auto !important;
}

body.is-checkout .custom-radio .content > div:nth-child(2),
body.is-checkout .custom-radio .content > *:nth-child(2) {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

body.is-checkout .custom-radio .desc {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: auto !important;
    margin-left: 12px !important;
}

body.is-checkout .custom-radio .content > div:last-child,
body.is-checkout .custom-radio .content > *:last-child,
body.is-checkout .custom-radio .price-col {
    margin-left: 32px !important;
    margin-right: 0 !important;
    text-align: left !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
    padding-right: 0 !important;
}

body.is-checkout .custom-radio .price-col.col-sm-4 {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

/* ==========================================================================
   Kompakte Produktbilder im Warenkorb-Modal & Checkout-Zusammenfassung
   ========================================================================== */

/* 1. Modal nach "In den Warenkorb" */
.pushed-success-image-wrapper {
    max-width: 120px !important;
}
.pushed-success-image-wrapper img,
.pushed-success-image-wrapper .image {
    max-width: 120px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* 2. Checkout-Zusammenfassungs-Tabelle */
.checkout-items-item .checkout-items-item-image-wrapper {
    max-width: 90px !important;
    width: 90px !important;
    flex: 0 0 90px !important;
}

.checkout-items-item .checkout-items-item-image-wrapper img {
    width: 90px !important;
    max-width: 90px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* ==========================================================================
   Kompakter Erfolgsbalken nach "In den Warenkorb"
   ========================================================================== */
.b44-addcart-success-only {
    background-color: #e6f7ec !important;
    border: 1px solid #a3e2b8 !important;
    border-radius: 12px !important;
    padding: 16px 24px !important;
    margin-bottom: 24px !important;
    text-align: center !important;
    color: #1e6b3b !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    box-shadow: 0 2px 8px rgba(40, 167, 69, 0.08) !important;
}

.b44-addcart-success-message {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
}

.b44-addcart-success-message span {
    color: #28a745 !important;
    font-size: 18px !important;
}

.modal[id^="eModal"] .modal-dialog {
    margin-top: 140px !important;
}

@media (max-width: 767.98px) {
    .modal[id^="eModal"] .modal-dialog {
        margin-top: 120px !important;
    }
}

/* ==========================================================================
   Phase 1: Checkout Schritt 3 (Bestellzusammenfassung) Premium-Redesign
   ========================================================================== */

/* 1. Checkout-Content breiter und zentriert */
body.is-checkout #content-wrapper.container {
    max-width: 1200px !important;
    width: 100% !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

/* 2. Premium-Karten für Adressen, Zahlungsart & Kommentar */
.checkout-confirmation .card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
    transition: box-shadow 0.2s ease !important;
}

.checkout-confirmation .card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05) !important;
}

.checkout-confirmation .card-body {
    padding: 24px !important;
}

/* 3. Header-Bereinigung & Textausrichtung */
.checkout-confirmation .card-header {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 18px 24px !important;
}

.checkout-confirmation .card-header .checkout-confirmation-heading {
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    color: #0f172a !important;
    margin-bottom: 0 !important;
}

.checkout-confirmation .card-header button.btn-link {
    color: #475569 !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    text-decoration: none !important;
    padding: 0 !important;
}

.checkout-confirmation .card-header button.btn-link:hover {
    color: #e07b1a !important; /* Premium-Orange */
}

/* 4. Lesbarkeit der Adressen & Details */
.checkout-confirmation #billing-address p,
.checkout-confirmation #shipping-method p,
.checkout-confirmation #panel-edit-comment p {
    line-height: 1.65 !important;
    font-size: 15px !important;
    color: #334155 !important;
    margin-bottom: 8px !important;
}

.checkout-confirmation #billing-address strong.title,
.checkout-confirmation #shipping-method strong.title {
    color: #0f172a !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    margin-bottom: 6px !important;
}

/* 5. Summenblock & Bestellbutton optisch stärken */
.checkout-confirmation .checkout-items-total-wrapper {
    margin-top: 32px !important;
    padding-top: 24px !important;
    border-top: 1px solid #e2e8f0 !important;
}

.checkout-confirmation .checkout-items-total {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-left: auto !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
}

.checkout-confirmation .checkout-items-total .total-net,
.checkout-confirmation .checkout-items-total .tax {
    font-size: 15px !important;
    color: #475569 !important;
    margin-bottom: 8px !important;
}

.checkout-confirmation .checkout-items-total-total {
    border-top: 1px solid #cbd5e1 !important;
    padding-top: 16px !important;
    margin-top: 16px !important;
}

.checkout-confirmation .checkout-items-total-total .price_label {
    font-size: 18px !important;
    color: #0f172a !important;
}

.checkout-confirmation .checkout-items-total-total .price.total-sum {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #e07b1a !important; /* Premium-Orange */
}

/* Kaufen-Button (Jetzt kostenpflichtig bestellen) */
.checkout-confirmation #complete-order-button {
    background-color: #e07b1a !important;
    border-color: #e07b1a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    padding: 14px 28px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(224, 123, 26, 0.2) !important;
    transition: all 0.2s ease-in-out !important;
}

.checkout-confirmation #complete-order-button:hover {
    background-color: #c9670f !important;
    border-color: #c9670f !important;
    box-shadow: 0 6px 16px rgba(224, 123, 26, 0.3) !important;
    transform: translateY(-1px) !important;
}

/* Checkout Step 3: 2-Spalten-Layout und Sticky Sidebar */
.checkout-sidebar-sticky {
    position: sticky !important;
    top: 110px !important;
    z-index: 10 !important;
}

.checkout-trust-badges {
    background-color: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 8px !important;
    padding: 15px !important;
}

.checkout-trust-badges .badge-item {
    display: flex !important;
    align-items: center !important;
    font-size: 13px !important;
    color: #495057 !important;
    margin-bottom: 8px !important;
}

.checkout-trust-badges .badge-item:last-child {
    margin-bottom: 0 !important;
}

/* B2: CSS Grid alignment inside #billing-address card body */
#billing-address .card-body .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px !important;
}

#billing-address .card-body .row > [class*="col"] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

@media (max-width: 767.98px) {
    #billing-address .card-body .row {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

/* B2: CSS Grid alignment inside #shipping-method card body */
#shipping-method .card-body .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 32px !important;
}

#shipping-method .card-body .row > [class*="col"] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
}

@media (max-width: 767.98px) {
    #shipping-method .card-body .row {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
    }
}

/* Gleichmäßige Höhe und Breite für Kommentar- und Coupon-Karten auf Desktop */
.b44-comment-coupon-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
}

.b44-comment-coupon-row > [class*="col"] {
    width: 100% !important;
    max-width: none !important;
    flex: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.b44-comment-coupon-row > [class*="col"] > .card {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

#panel-edit-comment .card-body, 
#panel-edit-coupon .card-body {
    flex: 1 1 auto !important;
}

@media (max-width: 767.98px) {
    .b44-comment-coupon-row {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
}

/* =========================================================
   Artikelliste (Checkout Step 3) - Schritt 1: Header-Spalten
   ========================================================= */
@media (min-width: 992px) {
    .checkout-confirmation .checkout-items-header {
        display: grid !important;
        grid-template-columns: 80px 1fr 120px 100px 120px !important;
        gap: 24px !important;
        align-items: center !important;
        padding: 0 0 16px 0 !important;
        margin: 0 !important;
        border-bottom: 2px solid #f1f5f9 !important;
        color: #64748b !important;
        font-size: 13px !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
        font-weight: 600 !important;
    }

    .checkout-confirmation .checkout-items-header > div {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        padding: 0 !important;
    }

    .checkout-confirmation .checkout-items-header-hr {
        display: none !important;
    }
}

/* =========================================================
   Artikelliste (Checkout Step 3) - Schritt 2: Artikelzeilen
   ========================================================= */
@media (min-width: 992px) {
    .checkout-confirmation .checkout-items-item {
        display: grid !important;
        grid-template-columns: 80px 1fr 120px 100px 120px !important;
        gap: 24px !important;
        align-items: center !important;
        padding: 24px 0 !important; /* Etwas großzügigere Zeilenhöhe */
        margin: 0 !important;
        border-bottom: 1px solid #e2e8f0 !important;
    }

    /* Verhindere bootstrap column overrides */
    .checkout-confirmation .checkout-items-item > div {
        width: auto !important;
        max-width: none !important;
        flex: none !important;
        padding: 0 !important;
    }

    /* Letzte Artikelzeile hat keinen Rahmen */
    .checkout-confirmation .checkout-items-item:last-of-type {
        border-bottom: none !important;
    }

    /* Blende die HR-Spalte aus */
    .checkout-confirmation .checkout-items-item > .col-12 {
        display: none !important;
    }

    /* Mobile Titel in Artikelzeilen ausblenden */
    .checkout-confirmation .checkout-items-item-title {
        display: none !important;
    }

    /* Styling & Ausrichtung der Spalten */
    .checkout-confirmation .checkout-items-item-image-wrapper {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important; /* Bild vertikal zentrieren */
    }

    .checkout-confirmation .checkout-items-item-image-wrapper img {
        width: 72px !important;
        height: 72px !important;
        object-fit: contain !important;
        border: 1px solid #f1f5f9 !important;
        border-radius: 8px !important;
        background-color: #ffffff !important;
        padding: 4px !important;
    }

    /* Artikelnamen linksbündig stabilisieren */
    .checkout-confirmation .checkout-items-item-main {
        text-align: left !important;
        justify-self: stretch !important;
        align-self: center !important;
        min-width: 0 !important;
    }

    .checkout-confirmation .checkout-items-item-main p,
    .checkout-confirmation .checkout-items-item-main p a,
    .checkout-confirmation .checkout-items-item-main ul {
        text-align: left !important;
    }

    .checkout-confirmation .checkout-items-item-main p {
        margin-bottom: 4px !important;
    }

    .checkout-confirmation .checkout-items-item-main p a {
        color: #0f172a !important;
        font-weight: 600 !important;
        font-size: 15px !important;
        text-decoration: none !important;
        transition: color 0.15s ease !important;
        display: inline-block !important;
    }

    .checkout-confirmation .checkout-items-item-main p a:hover {
        color: #e07b1a !important;
    }

    .checkout-confirmation .checkout-items-item-main ul.list-unstyled {
        margin-bottom: 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px 12px !important;
    }

    .checkout-confirmation .checkout-items-item-main ul.list-unstyled li {
        font-size: 12px !important;
        color: #64748b !important;
    }

    .checkout-confirmation .checkout-items-item-price-single {
        text-align: right !important;
        color: #334155 !important;
        font-size: 15px !important;
        display: block !important;
    }

    .checkout-confirmation .checkout-items-item-quantity {
        text-align: center !important;
        color: #334155 !important;
        font-size: 15px !important;
        display: block !important;
    }

    .checkout-confirmation .price-col {
        text-align: right !important;
        color: #0f172a !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        display: block !important;
    }
}

/* =========================================================
   Artikelliste (Checkout Step 3) - Schritt 3: Rechtliche Links
   ========================================================= */
.checkout-confirmation-legal-notice a,
.checkout-confirmation a[href*="AGB"],
.checkout-confirmation a[href*="Widerruf"],
.checkout-confirmation a[href*="Datenschutz"] {
    color: #e07b1a !important;
    text-decoration: none !important;
    font-weight: 500 !important;
}

.checkout-confirmation-legal-notice a:hover,
.checkout-confirmation a[href*="AGB"]:hover,
.checkout-confirmation a[href*="Widerruf"]:hover,
.checkout-confirmation a[href*="Datenschutz"]:hover {
    color: #c9670f !important;
    text-decoration: underline !important;
}

/* =========================================================
   Artikelliste (Checkout Step 3) - Schritt 4: Bestellübersicht-Kachel
   ========================================================= */

/* Summenbox (Kachel) */
.checkout-confirmation .checkout-items-total {
    background-color: #ffffff !important; /* Weißer Hintergrund */
    border: 1px solid #e2e8f0 !important;   /* Feiner Rahmen */
    border-radius: 12px !important;        /* 12px Radius */
    padding: 32px !important;              /* Mehr Padding */
    margin-left: auto !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03) !important;
}

/* Gesamtsumme */
.checkout-confirmation .checkout-items-total-total {
    border-top: 1px solid #cbd5e1 !important;
    padding-top: 20px !important;
    margin-top: 20px !important;
}

.checkout-confirmation .checkout-items-total-total .price_label {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #0f172a !important;
}

.checkout-confirmation .checkout-items-total-total .price.total-sum {
    font-size: 28px !important;           /* Größer */
    font-weight: 800 !important;           /* Kräftiger */
    color: #e07b1a !important;            /* Premium-Orange */
}

/* Kaufen-Button (Jetzt zahlungspflichtig bestellen) */
.checkout-confirmation #complete-order-button {
    background-color: #e07b1a !important;
    border-color: #e07b1a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 18px !important;
    padding: 16px 32px !important;         /* Größerer Button */
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(224, 123, 26, 0.25) !important;
    transition: all 0.25s ease-in-out !important;
    letter-spacing: 0.5px !important;
}

.checkout-confirmation #complete-order-button:hover {
    background-color: #c9670f !important;
    border-color: #c9670f !important;
    box-shadow: 0 6px 20px rgba(224, 123, 26, 0.35) !important;
    transform: translateY(-2px) !important;
}

/* Button „Warenkorb ändern“ als Outline-Button */
.checkout-confirmation .checkout-button-row a[href*="warenkorb.php"] {
    color: #64748b !important;            /* Dezentes Grau */
    border: 1px solid #cbd5e1 !important; /* Dezenter Rahmen */
    background-color: transparent !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    padding: 16px 28px !important;         /* Gleiche Höhe wie Kaufen-Button */
    border-radius: 8px !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.checkout-confirmation .checkout-button-row a[href*="warenkorb.php"]:hover {
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    background-color: #f8fafc !important; /* Subtiler Hover-Hintergrund */
}


/* =========================================================
   Kundenkonto (Mein Konto) - Phase 1A: Basislayout
   ========================================================= */

/* 1. Container & Breite */
#account {
    max-width: 1340px !important;
    margin: 20px auto 60px !important;
    padding: 0 15px !important;
}

/* 2. Begrüßung */
#account h1 {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
    font-size: 28px !important;
    color: #0f172a !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.02em !important;
    text-align: left !important;
}

#account .account-head-data {
    margin-bottom: 30px !important;
    color: #64748b !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* 3. Cards */
#account .card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.02) !important;
    padding: 24px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.2s ease-in-out !important;
}

#account .card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
    border-color: #cbd5e1 !important;
}

/* 4. Card-Header */
#account .card-header {
    background: transparent !important;
    border: none !important;
    padding: 0 0 16px 0 !important;
    margin-bottom: 12px !important;
    border-bottom: 2px solid #f1f5f9 !important;
}

#account .card-header h2,
#account .card-header h2 a {
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-decoration: none !important;
}

/* 5. Links & Icons in Orange */
#account a {
    color: #e07b1a !important;
    transition: color 0.15s ease !important;
}

#account a:hover {
    color: #c9670f !important;
    text-decoration: none !important;
}

#account .fa-pencil-alt,
#account .fa-pencil,
#account .fas.fa-pencil-alt {
    color: #e07b1a !important;
    transition: transform 0.15s ease !important;
}

#account a:hover .fa-pencil-alt {
    transform: scale(1.15) !important;
}

/* =========================================================
   Kundenkonto (Mein Konto) - Phase 1B: Grid Layout
   ========================================================= */

/* Parent-Container der Kacheln */
#account .row:has(> .account-data-item) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

/* Die Kacheln selbst (Bootstrap Column Overrides) */
#account .account-data-item {
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    flex: none !important;
}

/* Mobile Ansicht unter 768px */
@media (max-width: 767.98px) {
    #account .row:has(> .account-data-item) {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* =========================================================
   Globale Modals / eModal Fix
   ========================================================= */

.modal-backdrop {
    z-index: 100010 !important;
}

.modal {
    z-index: 100020 !important;
}

.modal.show {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.modal.show .modal-dialog {
    margin: 0 auto !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

@media (min-width: 576px) {
    .modal.show .modal-dialog {
        max-width: 500px !important;
    }
}

@media (max-width: 575.98px) {
    .modal.show .modal-dialog {
        max-width: 90% !important;
        width: 90% !important;
    }
}

/* =========================================================
   Kundenkonto (Mein Konto) - Premium Action Bar (Logout & Löschen)
   ========================================================= */

/* Der äußere Premium-Container (Aktionsleiste) */
.account-actions-bar {
    background-color: #f8fafc !important; /* Sehr softes Grau */
    border: 1px solid #e2e8f0 !important; /* Feine Linie */
    border-radius: 16px !important;       /* Premium Eckenradius */
}

/* "Konto löschen" als dezenter Textlink links */
.account-action-delete {
    color: #94a3b8 !important; /* Klares, unaufdringliches Grau */
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
}

.account-action-delete:hover {
    color: #ef4444 !important; /* Signalrot bei Hover */
    text-decoration: underline !important;
}

/* "Abmelden" als dunkler Premium-Button rechts */
.btn-logout {
    background-color: #0f172a !important; /* Slate-900 Anthrazit */
    border: 1px solid #0f172a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 12px 28px !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
}

.btn-logout:hover {
    background-color: #e07b1a !important; /* MCTRADE Orange */
    border-color: #e07b1a !important;
    color: #ffffff !important;
    box-shadow: 0 6px 20px rgba(224, 123, 26, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* =========================================================
   Kundenkonto (Mein Konto) - Modernes Grid-Flattening (Plan B)
   ========================================================= */

@media (min-width: 768px) {
    /* 1. Haupt-Container als Grid definieren */
    #account {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 24px !important;
        max-width: 1340px !important;
        margin: 20px auto 60px !important;
        padding: 0 15px !important;
    }

    /* Umschließenden col-12 Wrapper ausblenden */
    #account > div {
        display: contents !important;
    }

    /* 2. Zeilen-Wrapper aus dem Layout-Fluss entfernen (display: contents) */
    #account > div > .row.account-head-data,
    #account > div > .row:not(.account-head-data) {
        display: contents !important;
    }

    /* 3. Breite, Flex und Padding für alle Kachel-Spalten zurücksetzen */
    #account .account-data-item,
    #account .account-data-shipping-address,
    #account > div > .row.account-head-data > div {
        flex: none !important;
        max-width: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 4. Volle Breite für Header-Elemente */
    #account h1 {
        grid-column: 1 / -1 !important;
        order: 1 !important;
        margin-bottom: 8px !important;
    }

    #account > div > .row.account-head-data > div:first-child {
        grid-column: 1 / -1 !important; /* Beschreibungstext über 2 Spalten */
        order: 2 !important;
        margin-bottom: 12px !important;
        color: #64748b !important;
    }

    /* 5. Grid-Reihenfolge (order) der Kacheln festlegen */
    
    /* Zeile 1 */
    #account .account-data-item-address { 
        order: 3 !important; 
    }
    #account .account-data-shipping-address { 
        order: 4 !important; 
    }

    /* Zeile 2 */
    #account .account-data-item-orders { 
        order: 5 !important; 
    }
    #account .account-data-item-wishlist { 
        order: 6 !important; 
    }

    /* Zeile 3 */
    #account .account-data-item-comparelist { 
        order: 7 !important; 
    }
    
    /* Guthaben-Spalte (2. Kind in der alten Head-Row) */
    #account > div > .row.account-head-data > div:nth-child(2) {
        grid-column: auto !important;
        order: 8 !important;
    }

    /* 6. Untere Aktionsleiste (Logout) über volle Breite */
    #account .account-actions-bar {
        grid-column: 1 / -1 !important;
        order: 9 !important;
    }
}

/* Mobile Optimierung (Stacking nach order-Reihenfolge) */
@media (max-width: 767.98px) {
    #account {
        display: flex !important;
        flex-direction: column !important;
        gap: 16px !important;
    }

    #account > div {
        display: contents !important;
    }

    #account > div > .row.account-head-data,
    #account > div > .row:not(.account-head-data) {
        display: contents !important;
    }

    #account .account-data-item,
    #account .account-data-shipping-address,
    #account > div > .row.account-head-data > div {
        flex: none !important;
        max-width: none !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    #account h1 { order: 1 !important; }
    #account > div > .row.account-head-data > div:first-child { order: 2 !important; }
    #account .account-data-item-address { order: 3 !important; }
    #account .account-data-shipping-address { order: 4 !important; }
    #account .account-data-item-orders { order: 5 !important; }
    #account .account-data-item-wishlist { order: 6 !important; }
    #account .account-data-item-comparelist { order: 7 !important; }
    #account > div > .row.account-head-data > div:nth-child(2) { order: 8 !important; }
    #account .account-actions-bar { order: 9 !important; }
}

/* Styling-Anpassung für die Guthaben-Kachel */
#account .account-head-data-credit {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.02) !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    transition: all 0.2s ease-in-out !important;
}

#account .account-head-data-credit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04) !important;
    border-color: #cbd5e1 !important;
}

/* Orangefarbenes Wallet-Icon im Card-Header */
#account .account-head-data-credit .card-title .fa-wallet {
    color: #e07b1a !important; /* MCTRADE Orange */
}

/* Neutralisierung des alten CSS-Pseudo-Icons */
#account .account-head-data-credit::before {
    display: none !important;
    content: none !important;
}

/* Card-Body strecken und Inhalt vertikal mittig ausrichten */
#account .account-head-data-credit .card-body {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    flex-grow: 1 !important;
    padding-top: 12px !important;
    padding-bottom: 24px !important;
}

/* Inhalt der Guthaben-Box */
#account .account-head-data-credit .guthaben-amount-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

#account .account-head-data-credit .guthaben-label {
    font-size: 12px !important;
    color: #94a3b8 !important; /* Subtileres Slate-Grau */
    margin-bottom: 8px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important; /* Modernere, strukturierte Optik */
    letter-spacing: 0.05em !important;
}

#account .account-head-data-credit .guthaben-amount {
    font-size: 36px !important;
    font-weight: 700 !important;
    color: #e07b1a !important; /* MCTRADE Orange */
    line-height: 1.0 !important;
}

/* Ausrichtung des Headers der Guthaben-Kachel auf Linksbündig */
#account .account-head-data-credit .card-header,
#account .account-head-data-credit .card-header h2,
#account .account-head-data-credit .card-title {
    text-align: left !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

/* =========================================================
   Warenkorb-Dropdown (Cart Dropdown) - Stabilisierung Checkout-Button
   ========================================================= */

/* 1. Button in allen Zuständen stabilisieren */
#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next,
#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next:hover,
#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next:focus,
#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next:active {
    min-height: 44px !important;
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
    line-height: 1.5 !important;
    border-width: 1px !important;
    transform: none !important;
    box-sizing: border-box !important;
    outline: none !important;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05) !important;
}

/* 2. Pseudo-Element (Pfeil) vor Breiten- und Positionsänderungen aus dem Parent schützen */
#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next::after,
#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next:hover::after,
#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next:focus::after,
#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next:active::after {
    display: inline-block !important;
    position: static !important;
    width: auto !important;
    height: auto !important;
    left: auto !important;
    top: auto !important;
    background: transparent !important;
    background-color: transparent !important;
    color: inherit !important;
    box-shadow: none !important;
    z-index: auto !important;
}

/* 3. Den Micro-Animations-Hover-Effekt sauber separieren */
#cart-dropdown-container .cart-dropdown-buttons .cart-dropdown-next:hover::after {
    transform: translateX(3px) !important;
}

/* =========================================================
   Checkout Zusammenfassung (Step 3) - Premium-Design
   ========================================================= */

/* 1. H1 Titel */
.checkout-confirmation h1 {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    font-size: 28px !important;
    color: #0f172a !important;
    margin-bottom: 24px !important;
    letter-spacing: -0.02em !important;
}

/* 2. Premium-Karten (Adressen, Versand, Kommentare, Kupon) */
.checkout-confirmation .card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02) !important;
    margin-bottom: 24px !important;
    overflow: hidden !important;
    transition: all 0.25s ease !important;
}

.checkout-confirmation .card:hover {
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.04) !important;
    border-color: #cbd5e1 !important;
}

/* 3. Veredelung der "Bearbeiten" Links in Pill-Buttons */
.checkout-confirmation .card-header button.btn-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    color: #475569 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.checkout-confirmation .card-header button.btn-link:hover {
    background-color: #e07b1a !important;
    border-color: #e07b1a !important;
    color: #ffffff !important;
}

.checkout-confirmation .card-header button.btn-link .fa-pencil-alt {
    font-size: 11px !important;
    color: inherit !important;
}

/* 4. Textareas & Coupon Inputs */
.checkout-confirmation-comment,
.b44-coupon-form .b44-input {
    border: 1px solid #cbd5e1 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
    background-color: #ffffff !important;
    transition: all 0.2s ease !important;
}

.checkout-confirmation-comment:focus,
.b44-coupon-form .b44-input:focus {
    border-color: #e07b1a !important;
    box-shadow: 0 0 0 3px rgba(224, 123, 26, 0.1) !important;
    outline: none !important;
}

/* 5. Artikelliste Kachel (.card-products) */
.checkout-confirmation .card-products {
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02) !important;
}

.checkout-confirmation .card-products .card-header {
    background-color: transparent !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 20px 28px !important;
}

.checkout-confirmation .card-products .card-body {
    padding: 28px !important;
}

/* 6. Spaltentitel (Header) */
@media (min-width: 992px) {
    .checkout-confirmation .checkout-items-header {
        border-bottom: 2px solid #f1f5f9 !important;
        padding-bottom: 12px !important;
    }
}

/* 7. Artikelzeilen */
@media (min-width: 992px) {
    .checkout-confirmation .checkout-items-item {
        border-bottom: 1px solid #f1f5f9 !important;
        padding: 20px 0 !important;
    }
    
    .checkout-confirmation .checkout-items-item-main p a {
        font-family: "Montserrat", sans-serif !important;
        color: #0f172a !important;
        font-weight: 700 !important;
        font-size: 15px !important;
        transition: color 0.15s ease !important;
    }

    .checkout-confirmation .checkout-items-item-main p a:hover {
        color: #e07b1a !important;
    }
}

/* 8. Summenblock (Kachel) */
.checkout-confirmation .checkout-items-total {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 28px !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.01) !important;
}

.checkout-confirmation .checkout-items-total-total {
    border-top: 1px solid #cbd5e1 !important;
    padding-top: 20px !important;
    margin-top: 20px !important;
}

.checkout-confirmation .checkout-items-total-total .price_label {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.checkout-confirmation .checkout-items-total-total .price.total-sum {
    font-size: 30px !important;
    font-weight: 800 !important;
    color: #e07b1a !important;
    letter-spacing: -0.02em !important;
}

/* 9. AGB/Notice-Box */
.checkout-confirmation-legal-notice {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid #e07b1a !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin: 24px 0 !important;
}

.checkout-confirmation-legal-notice p {
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #475569 !important;
    margin: 0 !important;
}

/* 10. Submission Button Row (Kaufen / Warenkorb ändern) */
.checkout-confirmation #complete-order-button {
    background-color: #e07b1a !important;
    border-color: #e07b1a !important;
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 18px !important;
    padding: 16px 36px !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 20px -4px rgba(224, 123, 26, 0.35) !important;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
    letter-spacing: 0.5px !important;
}

.checkout-confirmation #complete-order-button:hover {
    background-color: #c9670f !important;
    border-color: #c9670f !important;
    box-shadow: 0 12px 24px -4px rgba(224, 123, 26, 0.45) !important;
}

.checkout-confirmation #complete-order-button:active {
    background-color: #b55a0b !important;
    border-color: #b55a0b !important;
    box-shadow: 0 6px 15px -4px rgba(224, 123, 26, 0.3) !important;
}

/* Button „Warenkorb ändern“ */
.checkout-confirmation .checkout-button-row a[href*="warenkorb.php"] {
    color: #64748b !important;
    border: 1px solid #cbd5e1 !important;
    background-color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 16px 28px !important;
    border-radius: 12px !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.02) !important;
}

.checkout-confirmation .checkout-button-row a[href*="warenkorb.php"]:hover {
    color: #0f172a !important;
    border-color: #94a3b8 !important;
    background-color: #f8fafc !important;
}

/* =========================================================
   Bestellabschluss (Danke-Seite) - Premium Redesign
   ========================================================= */

/* Der weiße Haupt-Karton */
#order-confirmation.order-completed-premium-card {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.02) !important;
    padding: 48px 32px !important;
    margin-bottom: 32px !important;
}

/* Grünes Erfolgs-Checkmark */
.success-checkmark-circle {
    width: 72px !important;
    height: 72px !important;
    background-color: #10b981 !important; /* Premium Grün */
    color: #ffffff !important;
    font-size: 32px !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    justify-content: center !important;
    align-items: center !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2) !important;
}

/* Titel und E-Mail-Notiz */
#order-confirmation .success-title {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 26px !important;
}

#order-confirmation .order-confirmation-note {
    font-size: 14px !important;
    color: #64748b !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Kleine Info-Karten für Bestellnummer / Zahlungsart */
.details-info-card {
    background-color: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 18px !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    text-align: center !important;
}

.details-info-card .info-card-label {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.details-info-card .info-card-value {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
}

/* Weiter einkaufen Button zentrieren und im MCTRADE-CTA-Stil formatieren */
.order-completed .row {
    justify-content: center !important;
}

.order-completed a.btn-primary[href*="mctrade24"],
.order-completed button.btn-primary {
    background-color: #e07b1a !important;
    border-color: #e07b1a !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 14px 28px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 12px rgba(224, 123, 26, 0.15) !important;
    transition: all 0.2s ease-in-out !important;
}

.order-completed a.btn-primary[href*="mctrade24"]:hover,
.order-completed button.btn-primary:hover {
    background-color: #c9670f !important;
    border-color: #c9670f !important;
    box-shadow: 0 6px 16px rgba(224, 123, 26, 0.25) !important;
}