/**
 * MUFFINTOP — HIGH-PERFORMANCE PELVIC MECHANICS
 * Premium Monolithic Bento-Grid E-Commerce Design System
 * Pure CSS (Zero external dependencies)
 */

:root {
  /* Slate & Titanium Obsidian Palette */
  --color-slate-950: #080C14;
  --color-slate-900: #0E1524;
  --color-slate-800: #172033;
  --color-slate-700: #2D3748;
  --color-slate-600: #4A5568;
  --color-slate-500: #718096;
  --color-slate-400: #A0AEC0;
  --color-slate-300: #CBD5E0;
  --color-slate-200: #E2E8F0;
  --color-slate-100: #F4F2EC;
  --color-slate-50:  #FAF9F5;

  /* ==========================================================================
     LUXURY GERMAN BIOHACKING: REFINED MATTE BRONZE & TITANIUM PALETTE
     ========================================================================== */
  --color-bronze-primary:   #C5A880; /* Refined Brushed Champagne Bronze */
  --color-bronze-light:     #E8DCBE; /* Warm Alabaster Bronze */
  --color-bronze-hover:     #D4B890; /* Hover Luster */
  --color-bronze-deep:      #9E7D53; /* Deep Aged Bronze */
  --color-bronze-dark:      #6E5334; /* Dark Accent Bronze */
  --color-bronze-dim:       rgba(197, 168, 128, 0.12);
  --color-bronze-border:    rgba(197, 168, 128, 0.28);
  --color-bronze-glow:      0 0 24px rgba(197, 168, 128, 0.32);

  /* Deep Obsidian Titanium Surfaces */
  --color-obsidian-950:     #080C14;
  --color-obsidian-900:     #0E1524;
  --color-obsidian-800:     #161F32;
  --color-obsidian-border:  rgba(197, 168, 128, 0.18);

  /* Unified Clinical & Engineering Accents */
  --color-cyber-lime:       #C5A880; /* Matte Bronze Accent */
  --color-cyber-glow:       rgba(197, 168, 128, 0.24);
  --color-cyber-dark:       #8A6B43;
  --color-cyber-alt:        #D4AF37; /* Metallic Brushed Brass Gold */
  --color-cobalt:           #3B82F6;
  --color-cobalt-dim:       rgba(59, 130, 246, 0.08);
  --color-danger:           #EF4444;
  --color-danger-dim:       rgba(239, 68, 68, 0.1);
  --color-warning:          #F59E0B;

  /* Canvas & Card Surfaces */
  --bg-page:        #FAF9F6;
  --bg-card:        #FFFFFF;
  --bg-card-subtle: #F8F7F4;
  --bg-card-dark:   #0E1524;
  --bg-card-tint:   #F3F1EB;

  /* Borders & Shadows */
  --border-light: rgba(197, 168, 128, 0.22);
  --border-dark:  rgba(197, 168, 128, 0.18);
  --border-tech:  rgba(197, 168, 128, 0.45);
  --shadow-bento: none;
  --shadow-hover: none;
  --shadow-glow:  none;

  /* Typography */
  --font-sans: 'Archivo', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  /* Layout Constants */
  --max-width: 1280px;
  --container-width: 1280px;
  --header-height: 114px;
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 9999px;
  --transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: var(--font-sans);
  background-color: var(--bg-page);
  color: var(--color-slate-900);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  overflow-x: clip;
}

body.alm-body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--bg-page);
  color: var(--color-slate-800);
  overflow-x: clip;
}

img, svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
  transition: var(--transition);
}

button, input, select, textarea {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

/* ==========================================================================
   TOP BAR & PROMO TICKER
   ========================================================================== */
.alm-top-ticker {
  background: #06090F;
  color: var(--color-slate-400);
  font-size: 0.73rem;
  font-family: var(--font-mono);
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(197, 168, 128, 0.2);
  position: relative;
  z-index: 101;
}

.alm-top-ticker-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.alm-ticker-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  white-space: nowrap;
}

.status-dot-pulse {
  width: 6px;
  height: 6px;
  background-color: var(--color-bronze-primary);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--color-bronze-primary);
  animation: almPulse 2s infinite ease-in-out;
  display: inline-block;
  flex-shrink: 0;
}

.ticker-label {
  color: var(--color-bronze-primary);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.ticker-val {
  color: var(--color-slate-300);
  font-weight: 500;
}

/* Center Promo Code Badge */
.alm-ticker-promo {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(197, 168, 128, 0.08);
  border: 1px solid rgba(197, 168, 128, 0.32);
  padding: 0.2rem 0.65rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.alm-ticker-promo:hover {
  background: rgba(197, 168, 128, 0.18);
  border-color: var(--color-bronze-primary);
  box-shadow: 0 0 10px rgba(197, 168, 128, 0.3);
  transform: translateY(-1px);
}

.ticker-promo-tag {
  color: var(--color-bronze-primary);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.04em;
}

.ticker-promo-text {
  color: #ffffff;
  font-weight: 500;
}

.ticker-promo-code {
  color: var(--color-bronze-light);
  font-weight: 700;
  background: rgba(0, 0, 0, 0.6);
  border: 1px dashed var(--color-bronze-primary);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  letter-spacing: 0.05em;
  transition: background 0.2s ease;
}

.alm-ticker-promo:hover .ticker-promo-code {
  background: rgba(197, 168, 128, 0.2);
}

.ticker-promo-copy-hint {
  font-size: 0.65rem;
  color: var(--color-bronze-primary);
  opacity: 0.85;
}

.alm-ticker-logistics {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--color-slate-400);
  white-space: nowrap;
  font-size: 0.72rem;
}

.alm-ticker-logistics svg {
  color: var(--color-bronze-primary);
}

/* Backward compatibility for status-pill */
.alm-top-ticker .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-bronze-primary);
}

/* ==========================================================================
   2-TIER HIGH-PERFORMANCE HEADER ARCHITECTURE
   ========================================================================== */
.alm-header {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, border-color 0.25s ease, background 0.25s ease;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
}

.alm-header.header-scrolled {
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.08) !important;
  border-bottom-color: rgba(197, 168, 128, 0.35) !important;
  background: rgba(255, 255, 255, 0.99) !important;
}

/* Tier 1: Primary Bar (Logo, Expanded Search, Actions) */
.alm-header-primary {
  width: 100%;
  height: 68px;
  display: flex;
  align-items: center;
}

.alm-header-primary-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}

/* Brand Logo */
.alm-logo-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  flex-shrink: 0;
}

.alm-logo-mark {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--color-slate-950) 0%, var(--color-slate-850, #1e293b) 100%);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cyber-lime);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
  transition: var(--transition);
}

.alm-logo-wrapper:hover .alm-logo-mark {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.28);
  border-color: rgba(16, 185, 129, 0.45);
}

.alm-logo-text {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--color-slate-950);
  line-height: 1.1;
}

.alm-logo-text span {
  color: var(--color-cyber-lime);
}

.alm-logo-tagline {
  display: block;
  font-size: 0.65rem;
  font-family: var(--font-mono);
  color: var(--color-slate-500);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 1px;
}

/* Expanded Live Search in Center */
.alm-search-box {
  position: relative;
  width: 440px;
  max-width: 100%;
}

.alm-search-input {
  width: 100%;
  background-color: #ffffff;
  border: 1.5px solid rgba(197, 168, 128, 0.45);
  border-radius: var(--radius-pill);
  padding: 0.62rem 1.15rem 0.62rem 2.45rem;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--color-slate-900);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.alm-search-input::placeholder {
  color: #94A3B8;
  font-weight: 400;
  opacity: 1;
}

.alm-search-input:hover {
  border-color: #C5A880;
  background-color: #FCFAF7;
  box-shadow: 0 2px 8px rgba(197, 168, 128, 0.16);
}

.alm-search-input:focus {
  outline: none;
  background-color: #ffffff;
  border-color: #C5A880;
  box-shadow: 0 0 0 3.5px rgba(197, 168, 128, 0.25), 0 4px 14px rgba(15, 23, 42, 0.06);
}

.alm-search-icon {
  position: absolute;
  left: 0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-slate-400);
  pointer-events: none;
}

/* Header Actions */
.alm-header-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.alm-header-hotline-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-slate-50);
  border: 1px solid var(--border-light);
  font-size: 0.74rem;
  font-family: var(--font-mono);
  color: var(--color-slate-700);
  text-decoration: none;
  transition: var(--transition);
}

.alm-header-hotline-pill:hover {
  background-color: var(--color-slate-100);
  border-color: var(--color-slate-300);
  color: var(--color-slate-950);
}

.alm-header-hotline-pill strong {
  color: var(--color-slate-900);
  font-weight: 700;
}

/* Tier 2: Dedicated Navigation Row directly under Logo & Primary Bar */
.alm-header-nav-bar {
  width: 100%;
  height: 46px;
  background-color: #ffffff;
  border-top: 1px solid var(--color-slate-100);
  border-bottom: 1px solid var(--color-slate-100);
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1000;
  overflow: visible !important;
}

.alm-header-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 clamp(0.5rem, 1.2vw, 1.25rem);
  box-sizing: border-box;
  overflow: visible !important;
}

/* Nav Menu Container - Perfect Distribution without Overflow */
.alm-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: clamp(0.12rem, 0.5vw, 0.65rem);
  margin: 0;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

.alm-nav-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.alm-nav-link {
  font-size: clamp(0.72rem, 0.77vw, 0.81rem);
  font-weight: 700;
  color: var(--color-slate-700);
  padding: 0.35rem clamp(0.24rem, 0.4vw, 0.48rem);
  border-radius: var(--radius-sm);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

/* Clean Luxury Aesthetics: Leading icons in desktop links are hidden to eliminate visual clutter and save ~180px */
.alm-nav-link svg:not(.dropdown-chevron) {
  display: none !important;
}

.dropdown-chevron {
  display: inline-block !important;
  margin-left: 0.15rem;
  opacity: 0.6;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.alm-nav-link:hover {
  color: var(--color-slate-950);
  background: rgba(197, 168, 128, 0.12);
}

.alm-nav-link.active {
  color: var(--color-slate-950);
  font-weight: 800;
  background: rgba(197, 168, 128, 0.16);
}

@media (max-width: 1200px) {
  .alm-nav-link {
    font-size: 0.72rem;
    padding: 0.3rem 0.32rem;
    gap: 0.2rem;
  }
  .nav-micro-badge {
    padding: 0.08rem 0.3rem;
    font-size: 0.6rem;
  }
}

@media (max-width: 1080px) {
  .alm-nav-link {
    font-size: 0.69rem;
    padding: 0.25rem 0.22rem;
    letter-spacing: -0.02em;
  }
  .alm-nav {
    gap: 0.12rem;
  }
  .nav-micro-badge {
    display: none; /* Hide micro-badges on narrow laptop screens so all 8 items stay 100% visible */
  }
}

@media (max-width: 980px) {
  .alm-header-nav-bar {
    overflow-x: auto !important;
    overflow-y: visible !important;
  }
  .alm-header-nav-inner {
    width: max-content;
    min-width: 100%;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 0.75rem;
  }
  .alm-header-nav-inner::-webkit-scrollbar {
    display: none;
  }
  .alm-nav {
    justify-content: flex-start;
    gap: 0.45rem;
    width: auto;
  }
  .alm-nav-link {
    font-size: 0.75rem;
    padding: 0.35rem 0.6rem;
  }
  .nav-micro-badge {
    display: inline-block;
  }
}

.alm-nav-link.active::after {
  content: "";
  position: absolute;
  bottom: 0px;
  left: 8%;
  width: 84%;
  height: 2px;
  background-color: var(--color-cyber-lime);
  border-radius: var(--radius-pill);
}

/* Micro Dropdown System */
.alm-nav-dropdown-wrapper {
  position: relative;
}

.dropdown-chevron {
  transition: transform 0.25s ease, opacity 0.2s ease;
  margin-left: 0.15rem;
  opacity: 0.6;
}

.alm-nav-dropdown-wrapper:hover .dropdown-chevron,
.alm-nav-dropdown-wrapper:focus-within .dropdown-chevron {
  transform: rotate(180deg);
  opacity: 1;
}

.alm-nav-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  min-width: 300px;
  max-width: min(340px, calc(100vw - 2rem));
  max-height: min(520px, calc(85vh - 60px));
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(197, 168, 128, 0.4) transparent;
  background: #ffffff !important;
  border: 1px solid rgba(197, 168, 128, 0.35);
  border-radius: 16px;
  box-shadow: 0 28px 72px -12px rgba(10, 17, 40, 0.28), 0 0 0 1px rgba(15, 23, 42, 0.08), 0 12px 24px -4px rgba(0, 0, 0, 0.06);
  padding: 0.65rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease;
  z-index: 99999 !important;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-sizing: border-box;
}

.alm-nav-dropdown-menu::-webkit-scrollbar {
  width: 4px;
}
.alm-nav-dropdown-menu::-webkit-scrollbar-thumb {
  background: rgba(197, 168, 128, 0.4);
  border-radius: 4px;
}

/* Boundary Containment & Alignment */
.dropdown-align-left .alm-nav-dropdown-menu,
.alm-nav-dropdown-wrapper:not(.dropdown-align-right) .alm-nav-dropdown-menu {
  left: 0;
  right: auto;
}

.dropdown-align-right .alm-nav-dropdown-menu {
  right: 0;
  left: auto;
}

@media (min-width: 992px) {
  .alm-nav-dropdown-wrapper:hover .alm-nav-dropdown-menu,
  .alm-nav-dropdown-wrapper:focus-within .alm-nav-dropdown-menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0);
  }
}

/* 2-Column Luxury Mega Dropdown for Product Groups & Catalog Options */
.dropdown-menu-products {
  width: 630px;
  min-width: min(630px, calc(100vw - 2rem));
  max-width: min(630px, calc(100vw - 2rem));
  max-height: calc(90vh - 50px);
  padding: 1.15rem;
  border-radius: 18px;
  background: #ffffff !important;
  box-shadow: 0 30px 80px -15px rgba(10, 17, 40, 0.3), 0 0 0 1px rgba(15, 23, 42, 0.08);
}

.dropdown-products-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.dropdown-header-tag {
  grid-column: span 2;
  font-size: 0.66rem;
  font-family: var(--font-mono);
  font-weight: 800;
  color: #857560;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.25rem 0.15rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.dropdown-header-tag::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-matte-bronze, #C5A880);
}

/* UI/UX Rich Dropdown Items & Luxury Card Tiles */
.alm-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  background: transparent;
  border: 1px solid transparent;
  transition: background 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}

.alm-dropdown-item:hover {
  background: rgba(197, 168, 128, 0.1);
  border-color: rgba(197, 168, 128, 0.25);
  transform: translateX(3px);
}

.dropdown-card-tile {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.85rem !important;
  padding: 0.85rem 0.95rem !important;
  background: #fbfbf9 !important;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  position: relative;
  overflow: hidden;
}

.dropdown-card-tile:hover {
  background: #ffffff !important;
  border-color: rgba(197, 168, 128, 0.7) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 10px 24px -4px rgba(197, 168, 128, 0.25), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
}

.dropdown-card-tile .card-arrow {
  opacity: 0;
  transform: translateX(-4px);
  transition: all 0.2s ease;
  color: var(--color-matte-bronze, #C5A880);
  font-weight: 700;
  margin-left: auto;
}

.dropdown-card-tile:hover .card-arrow {
  opacity: 1;
  transform: translateX(0);
}

.dropdown-item-icon {
  width: 38px;
  height: 38px;
  min-width: 38px;
  border-radius: 10px;
  background: rgba(197, 168, 128, 0.14);
  color: var(--color-cyber-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.dropdown-card-tile:hover .dropdown-item-icon {
  transform: scale(1.08);
}

.icon-katalog {
  background: rgba(16, 185, 129, 0.12) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.25);
}

.icon-pakete {
  background: rgba(245, 158, 11, 0.12) !important;
  color: #d97706 !important;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.icon-waesche {
  background: rgba(14, 165, 233, 0.12) !important;
  color: #0284c7 !important;
  border: 1px solid rgba(14, 165, 233, 0.25);
}

.icon-kissen {
  background: rgba(99, 102, 241, 0.12) !important;
  color: #4f46e5 !important;
  border: 1px solid rgba(99, 102, 241, 0.25);
}

.icon-einlagen {
  background: rgba(197, 168, 128, 0.16) !important;
  color: #967241 !important;
  border: 1px solid rgba(197, 168, 128, 0.35);
}

.icon-vitalstoffe {
  background: rgba(34, 197, 94, 0.12) !important;
  color: #16a34a !important;
  border: 1px solid rgba(34, 197, 94, 0.25);
}

.dropdown-item-content {
  flex: 1;
  min-width: 0;
}

.dropdown-item-title {
  font-size: 0.88rem;
  font-weight: 750;
  color: #0f172a;
  line-height: 1.25;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.2rem;
}

.dropdown-item-desc {
  font-size: 0.72rem;
  color: #64748b;
  line-height: 1.35;
  white-space: normal;
}

/* Bottom Trust Strip */
.dropdown-full-width-chip,
.dropdown-trust-strip {
  grid-column: span 2;
  margin-top: 0.65rem;
  padding: 0.65rem 0.95rem;
  background: linear-gradient(135deg, #0e1524 0%, #1e293b 100%) !important;
  border: 1px solid rgba(197, 168, 128, 0.3) !important;
  border-radius: 10px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: #e2e8f0 !important;
  gap: 0.5rem;
  box-sizing: border-box;
}

.dropdown-trust-strip span:first-child,
.dropdown-full-width-chip span:first-child {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #cbd5e1 !important;
  font-weight: 600;
  letter-spacing: 0.03em;
}

.dropdown-trust-strip .trust-highlight,
.dropdown-full-width-chip span:last-child {
  color: #e5c396 !important;
  font-weight: 800;
  letter-spacing: 0.05em;
}

@media (max-width: 680px) {
  .dropdown-menu-products {
    width: calc(100vw - 1.5rem);
    min-width: calc(100vw - 1.5rem);
    max-width: calc(100vw - 1.5rem);
    padding: 0.75rem;
  }
  .dropdown-products-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .dropdown-header-tag {
    grid-column: span 1;
  }
  .dropdown-full-width-chip,
  .dropdown-trust-strip {
    grid-column: span 1;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}

.dropdown-divider {
  height: 1px;
  background: var(--color-slate-100);
  margin: 0.25rem 0.4rem;
}

.alm-nav-trust-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-slate-700);
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 750;
  font-family: var(--font-mono);
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.alm-nav-trust-chip:hover {
  background: rgba(16, 185, 129, 0.16);
  color: var(--color-slate-950);
}

/* Micro badges for nav */
.nav-micro-badge {
  font-size: 0.65rem;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-slate-100);
  color: var(--color-slate-700);
  border: 1px solid var(--border-light);
  line-height: 1.2;
}

.nav-micro-badge.badge-sale {
  background-color: rgba(197, 168, 128, 0.16);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.28);
}

/* Nav Right Guarantee Tag */
.alm-nav-telemetry-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--color-slate-500);
  white-space: nowrap;
}

.alm-nav-telemetry-tag svg {
  color: var(--color-cyber-lime);
  flex-shrink: 0;
}

.alm-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1.5px solid rgba(197, 168, 128, 0.4);
  border-radius: 12px;
  box-shadow: 0 14px 40px -4px rgba(15, 23, 42, 0.16), 0 0 0 1px rgba(197, 168, 128, 0.15);
  max-height: 400px;
  overflow-y: auto;
  display: none;
  z-index: 120;
  scrollbar-width: thin;
}

.alm-search-dropdown.active {
  display: block;
}

.alm-search-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.95rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  transition: all 0.15s ease;
  text-decoration: none;
  cursor: pointer;
}

.alm-search-item:last-child {
  border-bottom: none;
}

.alm-search-item:hover {
  background-color: #FCFAF7;
}

.alm-search-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: radial-gradient(circle at 50% 50%, #172033 0%, #0a0f1a 100%);
  border: 1px solid rgba(197, 168, 128, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: 2px;
}

.alm-search-thumb img, .alm-search-thumb svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
}

.alm-search-meta {
  flex: 1;
  min-width: 0;
}

.alm-search-title {
  font-size: 0.86rem;
  font-weight: 750;
  color: var(--color-slate-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.alm-search-cat {
  font-size: 0.72rem;
  color: var(--color-slate-500);
  font-family: var(--font-mono);
  margin-top: 0.15rem;
}

.alm-search-price {
  font-size: 0.88rem;
  font-weight: 850;
  font-family: var(--font-mono);
  color: var(--color-slate-900);
  white-space: nowrap;
}

.alm-search-footer-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: rgba(197, 168, 128, 0.08);
  border-top: 1px solid rgba(197, 168, 128, 0.25);
  font-size: 0.82rem;
  font-weight: 750;
  color: #8C6D3F;
  text-decoration: none;
  transition: all 0.15s ease;
}

.alm-search-footer-link:hover {
  background: rgba(197, 168, 128, 0.18);
  color: #5C4524;
}

.alm-search-footer-link .search-footer-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.alm-search-footer-link:hover .search-footer-arrow {
  transform: translateX(3px);
}

.alm-search-empty {
  padding: 1.5rem 1rem;
  text-align: center;
  font-size: 0.84rem;
  color: var(--color-slate-600);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
}

.alm-search-empty-icon {
  font-size: 1.5rem;
}

.alm-search-empty-link {
  font-size: 0.82rem;
  font-weight: 750;
  color: #B38F5C;
  text-decoration: none;
  margin-top: 0.25rem;
  transition: color 0.15s ease;
}

.alm-search-empty-link:hover {
  color: #8C6D3F;
  text-decoration: underline;
}

/* Header Actions */
.alm-header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.alm-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-slate-700);
  transition: var(--transition);
}

.alm-icon-btn:hover {
  background-color: var(--color-slate-50);
  border-color: var(--color-slate-400);
  color: var(--color-slate-900);
}

.alm-icon-btn {
  position: relative !important;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-slate-700);
  transition: var(--transition);
  text-decoration: none;
}

.alm-icon-btn:hover {
  background-color: var(--color-slate-50);
  border-color: var(--color-slate-400);
  color: var(--color-slate-900);
}

.alm-cart-trigger {
  position: relative !important;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  background-color: var(--color-slate-900);
  color: #ffffff;
  padding: 0.45rem 1.05rem;
  border-radius: var(--radius-pill);
  font-size: 0.82rem;
  font-weight: 700;
  transition: var(--transition);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  cursor: pointer;
  flex-shrink: 0;
}

.alm-cart-trigger:hover {
  background-color: var(--color-slate-800);
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.25);
  color: #ffffff;
}

/* Badge Count - Fixed strictly to button corner with zero stray positioning */
.alm-badge-count {
  position: absolute !important;
  top: -6px !important;
  right: -6px !important;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: var(--radius-pill);
  background-color: var(--color-matte-bronze, #C5A880);
  color: #0E1524 !important;
  font-size: 0.72rem;
  font-weight: 850;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  border: 2px solid #ffffff;
  z-index: 25;
  pointer-events: none;
  line-height: 1;
}

.alm-mobile-toggle {
  display: none;
}

/* ==========================================================================
   BENTO GRID ARCHITECTURE
   ========================================================================== */
.alm-container {
  max-width: var(--max-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.alm-section {
  padding: 3.5rem 0;
}

.alm-section-sm {
  padding: 2rem 0;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
}

.bento-card {
  background: var(--bg-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  box-shadow: var(--shadow-bento);
  position: relative;
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
}

.bento-card:hover {
  border-color: rgba(197, 168, 128, 0.45);
  transform: translateY(-2px);
}

.bento-card-dark {
  background: var(--color-slate-900);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.08);
}

.bento-card-dark:hover {
  border-color: rgba(197, 168, 128, 0.5);
}

.bento-card-slate {
  background: var(--color-slate-800);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.08);
}

.bento-card-tint {
  background: var(--bg-card-tint);
  border-color: var(--border-light);
}

/* Bento Column Spans */
.col-12 { grid-column: span 12; }
.col-8  { grid-column: span 8; }
.col-7  { grid-column: span 7; }
.col-6  { grid-column: span 6; }
.col-5  { grid-column: span 5; }
.col-4  { grid-column: span 4; }
.col-3  { grid-column: span 3; }

/* Bento Technical Accents */
.alm-corner-tag {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--color-slate-400);
  letter-spacing: 0.06em;
}

/* ==========================================================================
   BUTTONS & BADGES
   ========================================================================== */
.alm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  font-weight: 700;
  text-align: center;
  transition: var(--transition);
  user-select: none;
  white-space: nowrap;
}

.alm-btn-primary {
  background-color: var(--color-obsidian-900, #0E1524);
  color: #ffffff;
  border: 1px solid rgba(197, 168, 128, 0.3);
}

.alm-btn-primary:hover {
  background-color: var(--color-obsidian-800, #161F32);
  border-color: #C5A880;
  color: #C5A880;
  box-shadow: 0 4px 14px rgba(197, 168, 128, 0.25);
  transform: translateY(-1px);
}

.alm-btn-cyber, .alm-btn-bronze {
  background: linear-gradient(135deg, #8E6B3E 0%, #76552B 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.2);
  font-weight: 750;
  letter-spacing: -0.01em;
  box-shadow: 0 3px 12px rgba(118, 85, 43, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.alm-btn-cyber:hover, .alm-btn-bronze:hover {
  background: linear-gradient(135deg, #9C7745 0%, #825E31 100%);
  color: #FFFFFF;
  box-shadow: 0 5px 18px rgba(118, 85, 43, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.3);
  transform: translateY(-2px);
}

.alm-btn-cyber:active, .alm-btn-bronze:active {
  background: linear-gradient(135deg, #7C5B2F 0%, #63451F 100%);
  color: #FFFFFF;
  transform: translateY(0);
}

.alm-btn-outline {
  background-color: transparent;
  color: var(--color-slate-800);
  border: 1px solid rgba(197, 168, 128, 0.35);
}

.alm-btn-outline:hover {
  background-color: rgba(197, 168, 128, 0.1);
  border-color: #C5A880;
  color: #080C14;
}

.alm-btn-outline-white {
  background-color: transparent;
  color: #ffffff;
  border: 1px solid rgba(197, 168, 128, 0.35);
}

.alm-btn-outline-white:hover {
  background-color: rgba(197, 168, 128, 0.15);
  border-color: #C5A880;
  color: #C5A880;
}

.alm-btn-sm {
  padding: 0.45rem 0.9rem;
  font-size: 0.78rem;
}

.alm-btn-lg {
  padding: 0.95rem 1.85rem;
  font-size: 1rem;
}

.alm-btn-block {
  width: 100%;
}

/* Badges */
.alm-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 750;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  width: fit-content !important;
  max-width: max-content !important;
  align-self: flex-start;
  box-sizing: border-box;
}

.bento-card[style*="text-align: center"] > .alm-badge,
.bento-card[style*="text-align:center"] > .alm-badge,
.text-center > .alm-badge {
  align-self: center !important;
  margin-left: auto;
  margin-right: auto;
}

.bento-card > .alm-btn:not(.alm-btn-block) {
  width: fit-content;
  max-width: max-content;
  align-self: flex-start;
}

.bento-card[style*="text-align: center"] > .alm-btn:not(.alm-btn-block),
.bento-card[style*="text-align:center"] > .alm-btn:not(.alm-btn-block),
.text-center > .alm-btn:not(.alm-btn-block) {
  align-self: center !important;
  margin-left: auto;
  margin-right: auto;
}

.alm-badge-cyber, .alm-badge-bronze {
  background-color: rgba(197, 168, 128, 0.14);
  color: #8C6B43;
  border: 1px solid rgba(197, 168, 128, 0.35);
}

.alm-badge-slate {
  background-color: #FAF9F6;
  color: var(--color-slate-700);
  border: 1px solid rgba(197, 168, 128, 0.22);
}

.alm-badge-dark {
  background-color: rgba(255, 255, 255, 0.08);
  color: #C5A880;
  border: 1px solid rgba(197, 168, 128, 0.25);
}

.alm-badge-danger {
  background-color: var(--color-danger-dim);
  color: var(--color-danger);
  border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Filter Bar & Chips */
.alm-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  padding: 0.4rem;
  background: #FFFFFF;
  border: 1px solid rgba(197, 168, 128, 0.22);
  border-radius: var(--radius-pill);
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.03);
}

.alm-filter-btn {
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-slate-600);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.alm-filter-btn:hover {
  color: #080C14;
  background: rgba(197, 168, 128, 0.08);
}

.alm-filter-btn.active {
  background: #0E1524;
  color: #C5A880;
  border-color: rgba(197, 168, 128, 0.4);
  box-shadow: 0 2px 8px rgba(10, 14, 23, 0.25);
  font-weight: 700;
}

.catalog-controls-card {
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}

.catalog-controls-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.catalog-filters-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.catalog-filter-chip {
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(197, 168, 128, 0.22);
  background: #FFFFFF;
  color: var(--color-slate-600);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.catalog-filter-chip:hover {
  color: #080C14;
  border-color: #C5A880;
  background: rgba(197, 168, 128, 0.08);
}

.catalog-filter-chip.active,
.alm-btn.catalog-filter-chip.active {
  background: linear-gradient(135deg, #B59364 0%, #8C6738 100%) !important;
  color: #FFFFFF !important;
  border-color: #C5A880 !important;
  box-shadow: 0 3px 12px rgba(140, 103, 56, 0.35) !important;
  font-weight: 750 !important;
}

.catalog-filter-chip.active .chip-count {
  color: #FFFFFF;
  opacity: 0.95;
}

@media (max-width: 640px) {
  #catalogGrid .alm-product-card,
  #mainProductGrid .alm-product-card {
    grid-column: span 1 !important;
  }
}

/* Product Grid System */
.alm-product-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.25rem;
  width: 100%;
}

/* Interactive Pelvic Anatomy HUD Stage */
.hud-stage-container {
  padding: 2.25rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: radial-gradient(circle at 40% 40%, #0F172A 0%, #070B12 100%);
  position: relative;
  width: 100%;
  height: 100%;
}

.hud-stage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
  width: 100%;
}

.hud-stage-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #C5A880;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  letter-spacing: 0.04em;
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
}

.hud-stage-tag span {
  white-space: nowrap;
}

.hud-stage-tag .hud-sensor-icon {
  width: 13px;
  height: 13px;
  min-width: 13px;
  min-height: 13px;
  flex-shrink: 0;
  display: inline-block;
  color: #C5A880;
  filter: drop-shadow(0 0 4px rgba(197, 168, 128, 0.4));
  animation: hudSensorGlow 3s ease-in-out infinite;
}

@keyframes hudSensorGlow {
  0%, 100% { opacity: 0.85; filter: drop-shadow(0 0 3px rgba(197, 168, 128, 0.3)); }
  50% { opacity: 1; filter: drop-shadow(0 0 6px rgba(197, 168, 128, 0.65)); }
}

.hud-stage-tag .radar-beacon {
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
  min-height: 6px !important;
  margin: 0 0.35rem 0 0 !important;
  background-color: #C5A880 !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 0 6px rgba(197, 168, 128, 0.8) !important;
  border: none !important;
  display: inline-block !important;
}

.hud-stage-tag .radar-beacon::after {
  display: none !important;
}

.hud-stage-telemetry-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: #10B981;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.28);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  letter-spacing: 0.03em;
}

/* Image Viewport */
.hud-image-viewport {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(197, 168, 128, 0.32);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(0, 0, 0, 0.5);
  background: #05080E;
  margin-bottom: 1.25rem;
}

.hud-telemetry-img {
  width: 100%;
  height: auto;
  max-height: 290px;
  object-fit: cover;
  display: block;
  filter: contrast(1.05) brightness(0.95);
  transition: filter 0.3s ease;
}

.hud-image-viewport:hover .hud-telemetry-img {
  filter: contrast(1.1) brightness(1.0);
}

/* Optical Scanning Beam */
.hud-scanline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(16, 185, 129, 0.8), #C5A880, transparent);
  box-shadow: 0 0 12px rgba(16, 185, 129, 0.9);
  animation: hudScanAnim 5s linear infinite;
  pointer-events: none;
  z-index: 3;
}

@keyframes hudScanAnim {
  0% { top: 0%; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* Interactive Beacons on Image */
.hud-beacon-node {
  position: absolute;
  transform: translate(-50%, -50%);
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 2px;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.beacon-pulse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1.5px solid #06B6D4;
  opacity: 0.4;
  animation: beaconPulseAnim 2.2s infinite ease-out;
  pointer-events: none;
}

@keyframes beaconPulseAnim {
  0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.8; }
  100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0; }
}

.beacon-badge {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #0E1524;
  border: 1.5px solid #06B6D4;
  color: #06B6D4;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.6);
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.beacon-label {
  background: rgba(8, 12, 20, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #F8FAFC;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 750;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hud-beacon-node:hover .beacon-badge,
.hud-beacon-node.active .beacon-badge {
  background: #C5A880;
  border-color: #FFFFFF;
  color: #0E1524;
  transform: scale(1.2);
  box-shadow: 0 0 14px #C5A880;
}

.hud-beacon-node:hover .beacon-label,
.hud-beacon-node.active .beacon-label {
  border-color: #C5A880;
  color: #D4B890;
  background: rgba(8, 12, 20, 0.96);
  box-shadow: 0 2px 10px rgba(197, 168, 128, 0.35);
}

/* Strategic Accurate Anatomical Coordinates on 3D Heatmap */
.beacon-val {
  color: #C5A880;
  font-weight: 850;
  margin-left: 0.25rem;
  font-size: 0.68rem;
}

.node-sacrum { top: 28%; left: 48%; }
.node-sacrum .beacon-badge { border-color: #F59E0B; color: #F59E0B; box-shadow: 0 0 10px rgba(245, 158, 11, 0.6); }
.node-sacrum .beacon-pulse { border-color: #F59E0B; }

.node-plexus { top: 43%; left: 60%; }
.node-plexus .beacon-badge { border-color: #3B82F6; color: #3B82F6; box-shadow: 0 0 10px rgba(59, 130, 246, 0.6); }
.node-plexus .beacon-pulse { border-color: #3B82F6; }

.node-pudendus { top: 53%; left: 47%; }
.node-pudendus .beacon-badge { border-color: #06B6D4; color: #06B6D4; box-shadow: 0 0 10px rgba(6, 182, 212, 0.6); }
.node-pudendus .beacon-pulse { border-color: #06B6D4; }

.node-ischiadica { top: 66%; left: 38%; }
.node-ischiadica .beacon-badge { border-color: #EC4899; color: #EC4899; box-shadow: 0 0 10px rgba(236, 72, 153, 0.6); }
.node-ischiadica .beacon-pulse { border-color: #EC4899; }

.node-perineum { top: 78%; left: 51%; }
.node-perineum .beacon-badge { border-color: #10B981; color: #10B981; box-shadow: 0 0 10px rgba(16, 185, 129, 0.6); }
.node-perineum .beacon-pulse { border-color: #10B981; }

/* Selector Pills Bar - Proportional Single Row */
.hud-node-selector-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.35rem;
  width: 100%;
}

.alm-hud-pill {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #CBD5E1;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: var(--font-sans);
  padding: 0.45rem 0.25rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  cursor: pointer;
  width: 100%;
  white-space: nowrap;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}

.alm-hud-pill:focus,
.alm-hud-pill:active {
  outline: none !important;
}

.alm-hud-pill:focus-visible {
  outline: 2px solid #C5A880 !important;
  outline-offset: 1px !important;
}

@media (max-width: 900px) {
  .hud-node-selector-bar {
    grid-template-columns: repeat(2, 1fr);
  }
  .hud-node-selector-bar button:last-child {
    grid-column: span 2;
  }
}

.alm-hud-pill .pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #64748B;
  transition: background 0.2s ease, transform 0.2s ease;
  flex-shrink: 0;
}

.alm-hud-pill:hover {
  background: rgba(197, 168, 128, 0.12);
  border-color: rgba(197, 168, 128, 0.4);
  color: #F8FAFC;
  transform: translateY(-1px);
}

.alm-hud-pill.active {
  background: #0E1524;
  border-color: #C5A880;
  color: #FFFFFF;
  box-shadow: 0 2px 10px rgba(197, 168, 128, 0.3), inset 0 0 10px rgba(197, 168, 128, 0.15);
  font-weight: 750;
}

.alm-hud-pill.active .pill-dot {
  background-color: #C5A880;
  box-shadow: 0 0 6px #C5A880;
  transform: scale(1.2);
}

/* Fallback SVG Container */
.hud-svg-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.hud-svg-container svg {
  width: 100% !important;
  height: auto !important;
  max-width: 520px;
  display: block;
}

.hud-interactive-node {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.hud-interactive-node:hover {
  filter: drop-shadow(0 0 10px rgba(197, 168, 128, 0.8));
}

.hud-interactive-node.active circle:nth-child(2) {
  fill: #C5A880 !important;
  opacity: 0.9 !important;
}

/* ==========================================================================
   PREMIUM PRODUCT CARDS (HIGH-TECH GERMAN LUXURY VITRINE)
   ========================================================================== */
.alm-product-card {
  background: #ffffff;
  border: 1px solid rgba(197, 168, 128, 0.24);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(197, 168, 128, 0.06);
}

.alm-product-card:hover {
  transform: translateY(-5px);
  border-color: rgba(197, 168, 128, 0.65);
  box-shadow: 0 20px 36px -8px rgba(15, 23, 42, 0.12), 0 0 0 1px rgba(197, 168, 128, 0.45), 0 0 24px rgba(197, 168, 128, 0.16);
}

/* Exhibition Media Stage (German Engineering Vitrine - Complete Product Fit) */
.alm-product-media {
  position: relative;
  background: radial-gradient(circle at 50% 50%, #172033 0%, #0a0f1a 100%);
  padding: 0.65rem !important;
  height: 245px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(197, 168, 128, 0.22);
}

.alm-product-media-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  overflow: hidden;
  position: relative;
}

.alm-product-media-link > svg, 
.alm-product-media-link > img,
.alm-product-media-link svg,
.alm-product-media-link img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  border-radius: 6px !important;
  display: block !important;
  filter: none !important;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.alm-product-card:hover .alm-product-media-link > svg,
.alm-product-card:hover .alm-product-media-link > img,
.alm-product-card:hover .alm-product-media-link svg,
.alm-product-card:hover .alm-product-media-link img {
  transform: scale(1.04);
  filter: none !important;
}

/* Top-Left Telemetry Badge */
.alm-product-media-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background: rgba(10, 14, 23, 0.76);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(197, 168, 128, 0.42);
  border-radius: var(--radius-pill);
  padding: 0.22rem 0.6rem;
  font-size: 0.66rem;
  font-family: var(--font-mono);
  font-weight: 700;
  color: #FAF4EB;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  z-index: 5;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  letter-spacing: 0.02em;
}

.telemetry-beacon {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #D4B890;
  box-shadow: 0 0 8px #D4B890;
}

/* Floating Wishlist Button (Sleek Frosted Glass Circle) */
.alm-product-wishlist-btn {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #64748B;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  z-index: 10;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.alm-product-wishlist-btn svg {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  display: block !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  stroke-width: 1.8 !important;
  fill: none;
  transition: transform 0.2s ease, stroke 0.2s ease, fill 0.2s ease;
}

.alm-product-wishlist-btn:hover {
  background: #ffffff;
  border-color: #C5A880;
  color: #A88658;
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(197, 168, 128, 0.28);
}

.alm-product-wishlist-btn.active {
  background: #ffffff;
  border-color: rgba(239, 68, 68, 0.45);
  color: #EF4444;
}

.alm-product-wishlist-btn.active svg {
  animation: almHeartPop 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  fill: #EF4444 !important;
  stroke: #EF4444 !important;
}

/* Hover Quick-Inspect Floating Pill (Clean, Non-Intrusive, Centered at Bottom) */
.alm-product-hover-actions {
  position: absolute;
  bottom: 0.75rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 8;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.22s ease, transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  padding: 0 0.75rem;
}

.alm-product-card:hover .alm-product-hover-actions {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.alm-quick-inspect-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  height: 32px !important;
  max-height: 32px !important;
  padding: 0 0.95rem !important;
  border-radius: 9999px !important;
  background: rgba(10, 14, 23, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(197, 168, 128, 0.5) !important;
  color: #F8F4EE !important;
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  font-family: var(--font-sans) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.alm-quick-inspect-btn:hover {
  background: #000000 !important;
  border-color: #D4B890 !important;
  color: #FFFFFF !important;
  transform: scale(1.04);
  box-shadow: 0 4px 18px rgba(197, 168, 128, 0.45) !important;
}

.alm-quick-inspect-btn svg {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  display: inline-block !important;
  flex-shrink: 0 !important;
  stroke: #C5A880 !important;
  stroke-width: 2.2 !important;
  fill: none !important;
}

.alm-quick-inspect-btn:hover svg {
  stroke: #FFFFFF !important;
}

/* Card Body (User-Friendly Proportions & Spacing) */
.alm-product-body {
  padding: 1.15rem 1.25rem 1.25rem;
  display: flex;
  flex-direction: column;
  flex: 1;
  background: #ffffff;
}

.alm-product-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.alm-product-rating {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--color-slate-500);
}

.star-bronze {
  color: #C5A880;
  font-size: 0.85rem;
}

.rating-score {
  font-weight: 700;
  color: #0F172A;
}

.rating-count {
  color: var(--color-slate-400);
}

.alm-product-title {
  font-size: 0.98rem;
  font-weight: 750;
  color: #0F172A;
  line-height: 1.35;
  letter-spacing: -0.015em;
  margin-bottom: 0.35rem;
  min-height: 2.65rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.alm-product-title a {
  color: #0F172A;
  transition: color 0.2s ease;
}

.alm-product-title a:hover {
  color: #A88658;
}

.alm-product-desc {
  font-size: 0.8rem;
  color: #475569;
  line-height: 1.42;
  margin-bottom: 0.75rem;
  min-height: 2.25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Specs Badges */
.alm-product-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.85rem;
}

.alm-spec-chip {
  background: #FAF9F6;
  border: 1px solid rgba(197, 168, 128, 0.25);
  font-size: 0.66rem;
  font-family: var(--font-mono);
  color: #6E5334;
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 600;
  white-space: nowrap;
}

.alm-spec-chip svg {
  color: #A88658;
  flex-shrink: 0;
  width: 10px !important;
  height: 10px !important;
}

/* Card Footer (2-Tier High-Conversion German Layout) */
.alm-product-footer {
  display: flex;
  flex-direction: column;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(197, 168, 128, 0.18);
  margin-top: auto;
  gap: 0.65rem;
}

.alm-product-footer-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  width: 100%;
}

.alm-product-price-stack {
  display: flex;
  flex-direction: column;
}

.alm-product-price {
  font-family: var(--font-sans);
  font-size: 1.3rem;
  font-weight: 850;
  letter-spacing: -0.03em;
  color: #0F172A;
  line-height: 1.1;
}

.alm-product-tax-note {
  font-size: 0.66rem;
  font-family: var(--font-mono);
  color: var(--color-slate-500);
  margin-top: 0.12rem;
}

.alm-product-delivery-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.67rem;
  font-weight: 600;
  color: #047857;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.22);
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.alm-product-delivery-pill .pulse-dot-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.7);
  flex-shrink: 0;
}

/* Action Buttons Row */
.alm-product-footer-actions {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  width: 100%;
}

.alm-btn-inspect-spec {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(197, 168, 128, 0.35);
  background: #FAF9F6;
  color: #7D603A;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.alm-btn-inspect-spec svg {
  width: 15px !important;
  height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  display: block !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
}

.alm-btn-inspect-spec:hover {
  background: #080C14;
  color: #D4B890;
  border-color: #D4B890;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
  transform: translateY(-1px);
}

/* Carousel Header Badge Row */
.carousel-badge-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
  width: 100%;
}

.carousel-badge-main .badge-text-short {
  display: none;
}
.carousel-badge-main .badge-text-full {
  display: inline;
}

.alm-btn-inspect-spec span {
  display: none;
}

.alm-btn-cart-expand .cart-btn-label-short {
  display: none;
}
.alm-btn-cart-expand .cart-btn-label-full {
  display: inline;
}

.alm-btn-cart-expand {
  flex: 1;
  height: 38px;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.83rem;
  font-weight: 750;
  letter-spacing: 0.01em;
  padding: 0 0.85rem;
  white-space: nowrap;
  cursor: pointer;
  background: linear-gradient(135deg, #C5A880 0%, #A88658 100%);
  color: #0E1524;
  border: 1px solid rgba(197, 168, 128, 0.4);
  box-shadow: 0 2px 8px rgba(197, 168, 128, 0.25);
  transition: all 0.2s ease;
}

.alm-btn-cart-expand svg {
  width: 15px !important;
  height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  display: block !important;
  flex-shrink: 0 !important;
  stroke: currentColor !important;
  stroke-width: 2.2 !important;
}

/* Backwards compatibility aliases */
.alm-product-price-box {
  min-width: 0;
}

.alm-product-delivery-status {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.65rem;
  color: var(--color-slate-500);
  margin-top: 0.25rem;
  white-space: nowrap;
}

.pulse-dot-green {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
  flex-shrink: 0;
}

.alm-product-cta-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

.alm-btn-inspect-mini {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(197, 168, 128, 0.35);
  background: #FAF9F6;
  color: #8C6B43;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.alm-btn-inspect-mini:hover {
  background: #080C14;
  color: #C5A880;
  border-color: #C5A880;
}

/* Luxury Matte Bronze Button */
.alm-btn-bronze {
  background: linear-gradient(135deg, #C5A880 0%, #A88658 100%);
  color: #080C14;
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-weight: 750;
  letter-spacing: -0.01em;
  box-shadow: 0 2px 8px rgba(168, 134, 88, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.25);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.alm-btn-bronze:hover {
  background: linear-gradient(135deg, #D4B890 0%, #B89362 100%);
  color: #080C14;
  box-shadow: 0 4px 16px rgba(197, 168, 128, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transform: translateY(-1.5px);
}

.alm-btn-bronze:active {
  transform: translateY(0);
}

/* ==========================================================================
   PRODUCT DETAIL PAGE SPECIFICS (UX-BREAKTHROUGH)
   ========================================================================== */
/* ==========================================================================
   PRODUCT DETAIL SHOWCASE ARCHITECTURE (produkt-ansicht.html)
   ========================================================================== */
.alm-detail-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.alm-detail-top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.alm-detail-top-nav .alm-back-link {
  margin-bottom: 0;
}

.alm-detail-top-nav .alm-detail-breadcrumb {
  margin-bottom: 0;
}

.alm-detail-layout-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "gallery header"
    "gallery info"
    "trust   info"
    "accord  info";
  gap: 2rem;
  align-items: start;
}

.alm-detail-gallery-card { grid-area: gallery; }
.alm-detail-header-card  { grid-area: header; margin-bottom: 0.85rem; }
.alm-detail-info-card    { grid-area: info; }
.alm-detail-trust-cards  { grid-area: trust; }
.alm-detail-accordions   { grid-area: accord; }

.alm-detail-header-card {
  margin-bottom: 0.85rem;
}

.alm-detail-meta-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.alm-detail-sku-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-slate-500);
  font-weight: 700;
}

.alm-detail-in-stock-pill {
  font-size: 0.72rem;
  font-weight: 700;
  color: #047857;
  background: rgba(16, 185, 129, 0.12);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-left: auto;
}

.alm-detail-gallery-card {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.alm-detail-media-container {
  position: relative;
  width: 100%;
  height: 480px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #1a2233 0%, #0a101d 100%);
  border: 1px solid rgba(197, 168, 128, 0.25);
  box-shadow: 0 12px 32px rgba(14, 21, 36, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.85rem;
}

.alm-detail-main-img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.alm-detail-media-container:hover .alm-detail-main-img {
  transform: scale(1.03);
}

.alm-detail-media-badge-left {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}

.alm-detail-media-badge-right {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
}

.alm-detail-media-top-bar {
  position: absolute;
  top: 1rem;
  left: 1rem;
  right: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
  z-index: 5;
  pointer-events: none;
}
.alm-detail-media-top-bar .alm-badge {
  max-width: 65%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: auto;
}
.alm-detail-media-top-bar .alm-detail-sku-badge {
  flex-shrink: 0;
  pointer-events: auto;
}

.alm-detail-sku-badge {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-slate-300);
  background: rgba(14, 21, 36, 0.85);
  backdrop-filter: blur(8px);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.alm-detail-media-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(14, 21, 36, 0.95) 100%);
  padding: 1.5rem 1.25rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-cyber-lime);
  letter-spacing: 0.04em;
  font-weight: 700;
}

.alm-detail-trust-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}

.alm-detail-trust-item {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0.85rem 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.alm-detail-trust-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.alm-detail-trust-item strong {
  display: block;
  font-size: 0.75rem;
  color: var(--color-slate-900);
  margin-bottom: 0.15rem;
}

.alm-detail-trust-item small {
  display: block;
  font-size: 0.66rem;
  color: var(--color-slate-500);
  line-height: 1.3;
}

/* Clinical & Technical Details Accordions */
.alm-detail-accordions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.alm-detail-accordion {
  background: #ffffff;
  border: 1px solid rgba(197, 168, 128, 0.3);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all 0.2s ease;
}

.alm-detail-accordion[open] {
  border-color: #C5A880;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}

.alm-accordion-header {
  list-style: none;
  cursor: pointer;
  padding: 0.85rem 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-slate-900);
  background: #ffffff;
  user-select: none;
  transition: background 0.2s ease;
}

.alm-accordion-header::-webkit-details-marker {
  display: none;
}

.alm-accordion-header:hover {
  background: rgba(197, 168, 128, 0.06);
}

.alm-detail-accordion[open] .alm-accordion-header {
  border-bottom: 1px solid rgba(197, 168, 128, 0.2);
  background: rgba(197, 168, 128, 0.04);
}

.alm-detail-accordion .accordion-chevron {
  font-size: 0.85rem;
  color: var(--color-slate-400);
  transition: transform 0.25s ease;
}

.alm-detail-accordion[open] .accordion-chevron {
  transform: rotate(180deg);
  color: #C5A880;
}

.alm-accordion-content {
  padding: 0.95rem 1rem;
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--color-slate-700);
}

.alm-detail-specs-grid {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.spec-pill-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  color: var(--color-slate-800);
  font-weight: 600;
}

.alm-detail-size-link {
  background: transparent;
  border: none;
  font-size: 0.72rem;
  color: #C5A880;
  cursor: pointer;
  font-weight: 700;
  text-decoration: underline;
  padding: 0;
}

.alm-detail-size-link:hover {
  color: #A88658;
}

/* Breadcrumb */
.alm-detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  color: var(--color-slate-500);
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.alm-detail-breadcrumb a {
  color: var(--color-slate-600);
  text-decoration: none;
  transition: color 0.2s ease;
}

.alm-detail-breadcrumb a:hover {
  color: var(--color-slate-950);
}

.alm-detail-breadcrumb .active {
  color: var(--color-slate-800);
  font-weight: 600;
}

/* Title & Ratings */
.alm-detail-title {
  font-size: 1.85rem;
  font-weight: 850;
  color: var(--color-slate-900);
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin-bottom: 0.35rem;
}

.alm-detail-subtitle {
  font-size: 0.92rem;
  color: var(--color-cyber-dark);
  font-weight: 700;
  margin-bottom: 0.75rem;
  line-height: 1.35;
}

.alm-detail-reviews-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  font-size: 0.82rem;
  color: var(--color-slate-600);
  flex-wrap: wrap;
}

.alm-detail-stars {
  color: #F59E0B;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}

.alm-detail-rating-val {
  font-weight: 800;
  color: var(--color-slate-900);
}

.alm-detail-verified-badge {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: #10B981;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
}

/* Description Paragraphs */
.alm-detail-description {
  font-size: 0.9rem;
  color: var(--color-slate-700);
  line-height: 1.65;
  margin-bottom: 1.35rem;
}

.alm-detail-desc-p {
  margin-bottom: 0.65rem;
}

.alm-detail-desc-p:last-child {
  margin-bottom: 0;
}

/* Category Variant Selector (Sizes, Hardness, etc.) */
.alm-detail-variant-group {
  background: var(--color-slate-50);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  margin-bottom: 1.25rem;
}

.alm-detail-variant-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--color-slate-800);
  margin-bottom: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.alm-detail-size-link {
  font-size: 0.72rem;
  color: var(--color-bronze-deep);
  text-decoration: underline;
  cursor: pointer;
}

.alm-detail-variant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}

.alm-detail-variant-chip {
  padding: 0.4rem 0.85rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid var(--border-light);
  color: var(--color-slate-700);
  cursor: pointer;
  transition: var(--transition);
}

.alm-detail-variant-chip:hover {
  border-color: var(--color-slate-400);
  color: var(--color-slate-950);
}

.alm-detail-variant-chip.active {
  background: var(--color-slate-900);
  color: var(--color-cyber-lime);
  border-color: var(--color-slate-900);
  box-shadow: 0 2px 8px rgba(14, 21, 36, 0.2);
}

.alm-detail-variant-hint {
  font-size: 0.72rem;
  color: var(--color-slate-500);
}

/* Usage Box */
.alm-detail-usage-box {
  background: rgba(197, 168, 128, 0.08);
  border-left: 3px solid var(--color-bronze-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 0.85rem 1rem;
  margin-bottom: 1.25rem;
}

.alm-detail-usage-title {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--color-cyber-dark);
  margin-bottom: 0.3rem;
  letter-spacing: 0.04em;
}

.alm-detail-usage-text {
  font-size: 0.82rem;
  color: var(--color-slate-800);
  line-height: 1.5;
}

/* Specs Row */
.alm-detail-specs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-bottom: 1.25rem;
}

.alm-spec-chip {
  background: rgba(14, 21, 36, 0.04);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.6rem;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-slate-700);
}

/* Tier Selector Headline */
.alm-detail-tier-section {
  margin-bottom: 1.25rem;
}

.alm-detail-tier-headline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.76rem;
  font-weight: 750;
  color: var(--color-slate-600);
  margin-bottom: 0.6rem;
  text-transform: uppercase;
}

.alm-tier-tag-pill {
  font-family: var(--font-mono);
  font-size: 0.55rem;
  font-weight: 800;
  padding: 0.12rem 0.4rem;
  border-radius: var(--radius-pill);
  background: rgba(14, 21, 36, 0.08);
  color: var(--color-slate-600);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  display: inline-block;
  margin-bottom: 0.2rem;
  line-height: 1;
}

.alm-tier-tag-pill.tag-sale {
  background: rgba(197, 168, 128, 0.25);
  color: #8C6738;
  border: 1px solid rgba(197, 168, 128, 0.45);
}

.alm-tier-tag-pill.tag-top {
  background: #10B981;
  color: #FFFFFF;
}

.alm-tier-subline {
  font-size: 0.65rem;
  color: var(--color-slate-500);
  line-height: 1.15;
  margin-top: 0.15rem;
  white-space: nowrap;
}

.alm-tier-subline.save-highlight {
  color: #047857;
  font-weight: 750;
}

/* UNIFIED PURCHASE & WISHLIST ACTION BAR */
.alm-detail-actions-bar {
  display: flex;
  align-items: stretch;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.alm-detail-qty-stepper {
  display: flex;
  align-items: center;
  background: #F8FAFC;
  border: 1.5px solid rgba(197, 168, 128, 0.35);
  border-radius: 10px;
  overflow: hidden;
  height: 52px;
}

.alm-qty-step-btn {
  width: 42px;
  height: 100%;
  border: none;
  background: transparent;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-slate-700);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
}

.alm-qty-step-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-slate-950);
}

.alm-qty-step-value {
  min-width: 36px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 800;
  color: var(--color-slate-900);
}

.alm-detail-cta-btn {
  flex: 1;
  height: 52px;
  font-size: 0.95rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #8E6B3E 0%, #76552B 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 3px 12px rgba(118, 85, 43, 0.3);
}

.alm-detail-cta-btn:hover {
  background: linear-gradient(135deg, #9C7745 0%, #825E31 100%);
  color: #FFFFFF;
  box-shadow: 0 5px 18px rgba(118, 85, 43, 0.45);
}

.alm-detail-cta-btn svg {
  color: #FFFFFF;
  stroke: #FFFFFF;
}

.detail-cta-label-full {
  display: inline;
  white-space: nowrap;
}

.detail-cta-label-short {
  display: none;
  white-space: nowrap;
}

.alm-detail-wishlist-action-btn {
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #ffffff;
  border: 1.5px solid rgba(197, 168, 128, 0.35);
  color: var(--color-slate-600);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.alm-detail-wishlist-action-btn:hover {
  border-color: #EF4444;
  color: #EF4444;
  background: #FEF2F2;
  transform: translateY(-2px);
}

.alm-detail-wishlist-action-btn.active {
  background: #FEF2F2;
  border-color: #EF4444;
  color: #EF4444;
  box-shadow: 0 4px 14px rgba(239, 68, 68, 0.25);
}

.alm-detail-stock-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--color-slate-600);
  padding: 0.5rem 0.25rem;
}

.alm-stock-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.6);
  flex-shrink: 0;
}

@media (max-width: 991px) {
  .alm-detail-gallery-card {
    position: relative;
    top: 0;
  }
  .alm-detail-media-container {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    max-height: 380px !important;
  }
  .alm-detail-trust-cards {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }
}

.alm-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-slate-600);
  margin-bottom: 1.5rem;
  transition: var(--transition);
}

.alm-back-link:hover {
  color: var(--color-slate-950);
  transform: translateX(-3px);
}

/* High-Contrast Dedicated Price Box right above CTA */
.alm-detail-price-box {
  background: var(--color-slate-900);
  border: 1px solid rgba(16, 185, 129, 0.35);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: #ffffff;
}

.alm-detail-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.alm-detail-current-price {
  font-family: var(--font-mono);
  font-size: 1.85rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.alm-detail-strike-price {
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--color-slate-400);
  text-decoration: line-through;
  margin-left: 0.65rem;
}

.alm-detail-savings-badge {
  background-color: var(--color-cyber-lime);
  color: #ffffff;
  font-size: 0.75rem;
  font-weight: 800;
  font-family: var(--font-mono);
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.alm-detail-price-legal {
  font-size: 0.72rem;
  color: var(--color-slate-300);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 0.45rem;
}

/* Tiered Discount Selector */
.alm-tier-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.alm-tier-option {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0.85rem 0.65rem;
  text-align: center;
  cursor: pointer;
  background: #ffffff;
  transition: var(--transition);
  position: relative;
}

.alm-tier-option:hover {
  border-color: var(--color-slate-400);
}

.alm-tier-option.active {
  border-color: var(--color-cyber-lime);
  background-color: rgba(16, 185, 129, 0.05);
  box-shadow: 0 0 0 2px var(--color-cyber-lime);
}

.alm-tier-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-slate-900);
  color: var(--color-cyber-lime);
  font-size: 0.62rem;
  font-family: var(--font-mono);
  font-weight: 700;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.alm-tier-title {
  font-size: 0.8rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
}

.alm-tier-price {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-slate-900);
}

/* HWG Legal Note Box */
.alm-hwg-notice {
  background-color: var(--color-slate-50);
  border-left: 3px solid var(--color-slate-400);
  padding: 0.85rem 1rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 0.74rem;
  color: var(--color-slate-600);
  line-height: 1.45;
  margin-top: 1.5rem;
}

/* ==========================================================================
   SLIDE-OVER CART DRAWER & 2-ROW BENTO CART ITEM
   ========================================================================== */
.alm-drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100000 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.alm-drawer-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.alm-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  max-width: 500px;
  background: #ffffff;
  box-shadow: -10px 0 35px rgba(0, 0, 0, 0.2);
  z-index: 100001 !important;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overscroll-behavior: contain;
}

.alm-drawer.active {
  transform: translateX(0);
}

/* Drawer Header with PROMINENT close button */
.alm-drawer-header {
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
}

.alm-drawer-title {
  font-size: 1.15rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.alm-drawer-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  background-color: var(--color-slate-100);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-slate-700);
  transition: var(--transition);
}

.alm-drawer-close-btn:hover {
  background-color: var(--color-slate-200);
  color: var(--color-slate-900);
}

/* Free Shipping Threshold Bar */
.alm-shipping-meter {
  padding: 0.9rem 1.5rem;
  background-color: var(--color-slate-50);
  border-bottom: 1px solid var(--color-slate-200);
}

.alm-shipping-meter-text {
  font-size: 0.78rem;
  color: var(--color-slate-700);
  margin-bottom: 0.4rem;
}

.alm-shipping-meter-bar {
  height: 6px;
  width: 100%;
  background-color: var(--color-slate-200);
  border-radius: var(--radius-pill);
  overflow: hidden;
}

.alm-shipping-meter-fill {
  height: 100%;
  background-color: var(--color-cyber-lime);
  width: 0%;
  transition: width 0.4s ease;
}

/* Drawer Body & Cart Items */
.alm-drawer-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* STRICT 2-ROW BENTO CART ITEM (DOES NOT BREAK INTO 3 COLUMNS) */
.alm-cart-item {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: var(--transition);
}

.alm-cart-item:hover {
  border-color: var(--color-slate-300);
  background-color: var(--color-slate-50);
}

/* Row 1: Image + Meta (Article tag & Title) */
.alm-cart-item-row-1 {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.alm-cart-item-thumb {
  width: 84px;
  height: 84px;
  min-width: 84px;
  background: #f8fafc;
  border-radius: 10px;
  border: 1px solid rgba(197, 168, 128, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.alm-cart-item-thumb img, .alm-cart-item-thumb svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
}

.alm-cart-item-info {
  flex: 1;
  min-width: 0;
}

.alm-cart-item-variant {
  margin-top: 0.2rem;
}

.alm-cart-item-variant .variant-pill {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: #0E1524;
  background: rgba(197, 168, 128, 0.16);
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  border: 1px solid rgba(197, 168, 128, 0.3);
}

.alm-cart-item-tag {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--color-slate-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}

.alm-cart-item-name {
  font-size: 0.86rem;
  font-weight: 700;
  color: var(--color-slate-900);
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Row 2: Stepper [- 1 +], Price, and Remove Button */
.alm-cart-item-row-2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.4rem;
  border-top: 1px solid var(--color-slate-100);
}

/* Accented Bento Cart Stepper & Remove Button */
.alm-cart-stepper {
  display: inline-flex;
  align-items: center;
  background: #F8F9FA;
  border: 1px solid rgba(197, 168, 128, 0.45);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04);
  overflow: hidden;
  height: 28px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.alm-cart-stepper:focus-within,
.alm-cart-stepper:hover {
  border-color: var(--color-matte-bronze, #B38F5C);
  box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.18);
}

.alm-stepper-btn {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 850;
  color: var(--color-slate-800);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.alm-stepper-btn:hover {
  background: rgba(197, 168, 128, 0.25);
  color: #000000;
}

.alm-stepper-btn:active {
  background: var(--color-matte-bronze, #B38F5C);
  color: #FFFFFF;
  transform: scale(0.92);
}

.alm-stepper-value {
  min-width: 28px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 850;
  color: var(--color-slate-950);
  padding: 0 0.15rem;
  user-select: none;
}

.alm-cart-item-price {
  font-family: var(--font-mono);
  font-size: 0.98rem;
  font-weight: 850;
  color: var(--color-slate-900);
}

/* Accented Destructive Remove Button */
.alm-cart-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.26rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 750;
  color: #DC2626;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.22);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  line-height: 1;
}

.alm-cart-remove-btn svg {
  width: 12px;
  height: 12px;
  stroke-width: 2.2;
  transition: transform 0.2s ease;
}

.alm-cart-remove-btn:hover {
  background: #DC2626;
  color: #FFFFFF;
  border-color: #DC2626;
  box-shadow: 0 2px 10px rgba(220, 38, 38, 0.28);
  transform: translateY(-1px);
}

.alm-cart-remove-btn:hover svg {
  transform: rotate(-8deg) scale(1.15);
}

.alm-cart-remove-btn:active {
  transform: translateY(0) scale(0.96);
}

.alm-drawer-clear-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.65rem;
  font-size: 0.74rem;
  font-weight: 700;
  color: #EF4444;
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all 0.2s ease;
}

.alm-drawer-clear-btn:hover {
  background: #EF4444;
  color: #ffffff;
}

.alm-drawer-count-badge {
  background: #0E1524;
  color: #C5A880;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(197, 168, 128, 0.3);
}

/* Drawer Footer */
.alm-drawer-footer {
  padding: 0.9rem 1.25rem;
  background-color: #ffffff;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.alm-drawer-promo-box {
  display: flex;
  gap: 0.5rem;
}

.alm-drawer-promo-input {
  flex: 1;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
  font-family: var(--font-mono);
  font-weight: 600;
  border: 1.5px solid rgba(197, 168, 128, 0.45);
  border-radius: var(--radius-md);
  text-transform: uppercase;
  background: #ffffff;
  color: var(--color-slate-900);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.alm-drawer-promo-input::placeholder {
  color: #94A3B8;
  font-family: var(--font-sans);
  text-transform: none;
  font-weight: 400;
}

.alm-drawer-promo-input:hover {
  border-color: #C5A880;
  background-color: #FCFAF7;
  box-shadow: 0 2px 8px rgba(197, 168, 128, 0.16);
}

.alm-drawer-promo-input:focus {
  outline: none;
  background-color: #ffffff;
  border-color: #C5A880;
  box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.25);
}

.alm-drawer-summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.82rem;
  color: var(--color-slate-600);
}

.alm-drawer-total-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-slate-900);
  border-top: 1px solid var(--color-slate-200);
  padding-top: 0.5rem;
}

.alm-drawer-total-val {
  font-family: var(--font-mono);
  font-size: 1.35rem;
}

.alm-drawer-discrete-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: var(--color-slate-500);
  font-family: var(--font-mono);
}

/* ==========================================================================
   DEDICATED FULL CART PAGE (WARENKORB.HTML) - LUXURY MEDICAL BENTO
   ========================================================================== */
.alm-cart-free-shipping-card {
  background: #fbfbf9;
  border: 1px solid rgba(197, 168, 128, 0.35);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

.alm-cart-table-head {
  display: grid;
  grid-template-columns: 3.5fr 1.2fr 1.4fr 1.3fr 0.6fr;
  padding: 0.65rem 1rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--color-slate-500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-slate-200);
  margin-bottom: 0.75rem;
}

.alm-cart-page-row {
  display: grid;
  grid-template-columns: 3.5fr 1.2fr 1.4fr 1.3fr 0.6fr;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1rem;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-md);
  margin-bottom: 0.85rem;
  transition: all 0.2s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

.alm-cart-page-row:hover {
  border-color: rgba(197, 168, 128, 0.6);
  box-shadow: 0 8px 24px -6px rgba(10, 17, 40, 0.08);
}

.alm-cart-product-cell {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.alm-cart-img-box {
  width: 96px;
  height: 96px;
  min-width: 96px;
  background: #f8fafc;
  border: 1px solid rgba(197, 168, 128, 0.28);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.alm-cart-img-box img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover !important;
  object-position: center center !important;
  display: block;
}

.alm-cart-product-meta {
  flex: 1;
  min-width: 0;
}

.alm-cart-sku-tag {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  color: var(--color-matte-bronze, #B38F5C);
  margin-bottom: 0.2rem;
  text-transform: uppercase;
}

.alm-cart-prod-title {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--color-slate-900);
  line-height: 1.3;
  text-decoration: none;
  display: block;
  margin-bottom: 0.3rem;
  transition: color 0.18s ease;
}

.alm-cart-prod-title:hover {
  color: var(--color-matte-bronze, #C5A880);
}

.alm-cart-delivery-status {
  font-size: 0.72rem;
  color: #059669;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.alm-cart-price-cell {
  font-family: var(--font-mono);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-slate-700);
}

.alm-cart-subtotal-cell {
  font-family: var(--font-mono);
  font-size: 1.12rem;
  font-weight: 850;
  color: var(--color-slate-950);
}

.alm-cart-stepper-cell,
.alm-cart-action-cell {
  display: flex;
  justify-content: center;
}

.alm-cart-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  margin-bottom: 1.5rem;
}

.alm-cart-trust-badges-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.alm-cart-trust-badge-tile {
  background: #fbfbf9;
  border: 1px solid rgba(197, 168, 128, 0.25);
  border-radius: var(--radius-sm);
  padding: 0.85rem;
  text-align: center;
  font-size: 0.75rem;
  color: var(--color-slate-700);
}

.alm-cart-trust-badge-tile strong {
  display: block;
  color: var(--color-slate-900);
  margin-bottom: 0.2rem;
  font-size: 0.8rem;
}

/* ==========================================================================
   CART PAGE EMPTY STATE
   ========================================================================== */
.alm-cart-empty-card {
  text-align: center;
  padding: 3.5rem 2rem;
  max-width: 620px;
  margin: 1.5rem auto 2.5rem;
  background: #ffffff;
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.alm-cart-empty-icon-wrap {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(197, 168, 128, 0.22) 0%, rgba(197, 168, 128, 0.06) 100%);
  color: var(--color-matte-bronze, #B38F5C);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.15rem;
  box-shadow: 0 4px 14px rgba(197, 168, 128, 0.2);
  border: 1px solid rgba(197, 168, 128, 0.35);
}

.empty-icon-sparkle {
  position: absolute;
  top: -2px;
  right: -2px;
  color: #C5A880;
  font-size: 0.82rem;
  line-height: 1;
}

.alm-cart-empty-icon {
  width: 28px;
  height: 28px;
}

.alm-cart-empty-badge {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.6rem;
}

.alm-cart-empty-title {
  font-size: 1.45rem;
  font-weight: 850;
  color: var(--color-slate-900);
  margin-bottom: 0.5rem;
  letter-spacing: -0.02em;
}

.alm-cart-empty-desc {
  color: var(--color-slate-600);
  font-size: 0.88rem;
  line-height: 1.5;
  max-width: 480px;
  margin: 0 auto 1.25rem;
}

.alm-cart-empty-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  max-width: 480px;
  margin-bottom: 0.75rem;
}

.alm-cart-empty-cta {
  padding: 0.75rem 1.6rem;
  font-size: 0.9rem;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
  white-space: nowrap;
  border-radius: var(--radius-pill);
}

.alm-cart-empty-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  width: 100%;
  max-width: 480px;
  margin: 0.5rem 0 1rem;
  box-sizing: border-box;
}

.alm-cart-grid-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem;
  background: #FAF8F5;
  border: 1px solid rgba(197, 168, 128, 0.3);
  border-radius: 12px;
  text-decoration: none;
  color: var(--color-slate-900);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  text-align: left;
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.alm-cart-grid-card:hover,
.alm-cart-grid-card:active {
  background: #FFFFFF;
  border-color: #C5A880;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(197, 168, 128, 0.16);
}

.alm-cart-grid-card.promo-card {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(197, 168, 128, 0.12) 100%);
  border-color: rgba(16, 185, 129, 0.35);
}

.grid-card-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
}

.grid-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.grid-card-text strong {
  font-size: 0.76rem;
  font-weight: 800;
  color: var(--color-slate-900);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid-card-text small {
  font-size: 0.64rem;
  color: var(--color-slate-500);
  margin-top: 0.1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.grid-card-text small.badge-saving {
  color: #047857;
  font-weight: 750;
}

.grid-card-arrow {
  font-size: 0.95rem;
  color: #B38F5C;
  font-weight: 700;
  line-height: 1;
  margin-left: auto;
  opacity: 0.7;
  transition: transform 0.2s ease;
}

.alm-cart-grid-card:hover .grid-card-arrow {
  transform: translateX(2px);
  opacity: 1;
}

.alm-cart-empty-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.66rem;
  color: var(--color-slate-500);
  margin-top: 0.2rem;
  flex-wrap: wrap;
  line-height: 1.3;
}

/* Empty drawer quick links */
.alm-drawer-empty-state {
  text-align: center;
  padding: 2.25rem 1.15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.alm-drawer-empty-quicklinks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.35rem;
  width: 100%;
  margin-top: 0.25rem;
}

.empty-quicklink {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.35rem 0.25rem;
  font-size: 0.7rem;
  font-weight: 700;
  background: #FAF8F5;
  border: 1px solid rgba(197, 168, 128, 0.28);
  border-radius: 8px;
  color: var(--color-slate-800);
  text-decoration: none;
  white-space: nowrap;
}

.empty-quicklink:hover {
  background: #ffffff;
  border-color: #C5A880;
  color: var(--color-slate-950);
}

@media (max-width: 900px) {
  .alm-cart-page-header {
    margin-bottom: 0.85rem !important;
  }
  .alm-cart-page-header .alm-badge {
    font-size: 0.62rem !important;
    padding: 0.2rem 0.5rem !important;
  }
  .alm-cart-page-header h1 {
    font-size: 1.45rem !important;
    margin: 0.25rem 0 0.2rem 0 !important;
  }
  .alm-cart-page-header p {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
  }
  .alm-cart-table-head {
    display: none !important;
  }
  .alm-cart-free-shipping-card {
    padding: 0.65rem 0.85rem !important;
    margin-bottom: 0.75rem !important;
    border-radius: 10px !important;
  }
  .alm-cart-free-shipping-card > div:first-child {
    font-size: 0.76rem !important;
    flex-wrap: wrap !important;
    gap: 0.25rem 0.5rem !important;
    margin-bottom: 0.35rem !important;
  }
  .alm-cart-page-row {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
      "prod prod prod"
      "step price act" !important;
    align-items: center !important;
    gap: 0.6rem 0.5rem !important;
    padding: 0.8rem 0.85rem !important;
    border-radius: 12px !important;
    margin-bottom: 0.75rem !important;
    background: #ffffff !important;
    border: 1px solid rgba(197, 168, 128, 0.3) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  }
  .alm-cart-product-cell {
    grid-area: prod !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    min-width: 0 !important;
  }
  .alm-cart-img-box {
    width: 90px !important;
    height: 90px !important;
    min-width: 90px !important;
    border-radius: 10px !important;
    padding: 0 !important;
    background: #f8fafc !important;
    border: 1px solid rgba(197, 168, 128, 0.3) !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  }
  .alm-cart-img-box img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
  .alm-cart-product-meta {
    min-width: 0 !important;
    flex: 1 !important;
  }
  .alm-cart-sku-tag {
    font-size: 0.63rem !important;
    margin-bottom: 0.12rem !important;
  }
  .alm-cart-prod-title {
    font-size: 0.84rem !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    margin-bottom: 0.2rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }
  .alm-cart-delivery-status {
    font-size: 0.68rem !important;
    line-height: 1.2 !important;
  }
  .alm-cart-price-cell {
    display: none !important;
  }
  .alm-cart-stepper-cell {
    grid-area: step !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
  }
  .alm-cart-stepper-cell .alm-cart-stepper {
    background: #f8fafc !important;
    border: 1px solid rgba(197, 168, 128, 0.35) !important;
    border-radius: 9999px !important;
    padding: 2px !important;
    gap: 3px !important;
  }
  .alm-cart-stepper-cell .alm-stepper-btn {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.9rem !important;
    border-radius: 9999px !important;
    background: #ffffff !important;
    border: 1px solid rgba(197, 168, 128, 0.3) !important;
    color: var(--color-slate-800) !important;
  }
  .alm-cart-stepper-cell .alm-stepper-btn:active {
    background: #C5A880 !important;
    color: #ffffff !important;
  }
  .alm-cart-stepper-cell .alm-stepper-value {
    font-size: 0.8rem !important;
    font-weight: 750 !important;
    min-width: 1.35rem !important;
    text-align: center !important;
  }
  .alm-cart-subtotal-cell {
    grid-area: price !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0.5rem 0.25rem 0 0 !important;
    font-size: 0.96rem !important;
    font-weight: 850 !important;
    font-family: var(--font-mono) !important;
    color: var(--color-slate-950) !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
    text-align: right !important;
  }
  .alm-cart-action-cell {
    grid-area: act !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
  }
  .alm-cart-remove-btn {
    padding: 0.32rem 0.5rem !important;
    font-size: 0.72rem !important;
    gap: 0.25rem !important;
    border-radius: 6px !important;
    color: var(--color-rose-600) !important;
    background: rgba(225, 29, 72, 0.05) !important;
    border: 1px solid rgba(225, 29, 72, 0.2) !important;
  }
  .alm-cart-remove-btn:hover,
  .alm-cart-remove-btn:active {
    background: rgba(225, 29, 72, 0.12) !important;
    color: var(--color-rose-700) !important;
  }
  .alm-cart-actions-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.45rem !important;
    padding-top: 0.4rem !important;
    margin-bottom: 0.85rem !important;
  }
  .alm-cart-actions-bar a {
    font-size: 0.72rem !important;
    padding: 0.45rem 0.65rem !important;
    white-space: nowrap !important;
  }
  .alm-cart-actions-bar .alm-drawer-clear-btn {
    font-size: 0.72rem !important;
    padding: 0.45rem 0.65rem !important;
    white-space: nowrap !important;
  }
  .alm-cart-trust-badges-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.35rem !important;
    margin-top: 0.75rem !important;
  }
  .alm-cart-trust-badge-tile {
    padding: 0.45rem 0.25rem !important;
    font-size: 0.62rem !important;
    line-height: 1.2 !important;
    border-radius: 6px !important;
  }
  .alm-cart-trust-badge-tile strong {
    font-size: 0.68rem !important;
    margin-bottom: 0.1rem !important;
  }
  .cart-summary-card {
    padding: 1rem 0.9rem !important;
    position: static !important;
    border-radius: 14px !important;
    margin-top: 0.5rem !important;
  }
  .cart-summary-card h2 {
    font-size: 1.05rem !important;
    margin-bottom: 0.85rem !important;
  }
  .cart-summary-card .alm-drawer-promo-input {
    font-size: 0.78rem !important;
    padding: 0.45rem 0.65rem !important;
  }
  .cart-summary-card #cartPagePromoBtn {
    font-size: 0.78rem !important;
    padding: 0.45rem 0.75rem !important;
  }
  .cart-summary-card .alm-neutral-box {
    padding: 0.65rem 0.75rem !important;
    margin-bottom: 1rem !important;
  }

  .alm-cart-empty-card {
    padding: 1.35rem 0.95rem 1.15rem !important;
    margin: 0.5rem auto 1.25rem !important;
    border-radius: 16px !important;
    max-width: 100% !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
  }
  .alm-cart-empty-icon-wrap {
    width: 48px !important;
    height: 48px !important;
    margin-bottom: 0.55rem !important;
  }
  .alm-cart-empty-icon {
    width: 22px !important;
    height: 22px !important;
  }
  .empty-icon-sparkle {
    font-size: 0.74rem !important;
  }
  .alm-cart-empty-badge {
    font-size: 0.56rem !important;
    padding: 0.15rem 0.45rem !important;
    margin-bottom: 0.35rem !important;
  }
  .alm-cart-empty-title {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.35rem !important;
  }
  .alm-cart-empty-desc {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.85rem !important;
    padding: 0 0.25rem !important;
    color: var(--color-slate-600) !important;
  }
  .alm-cart-empty-actions {
    flex-direction: column !important;
    gap: 0.45rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 0.5rem !important;
  }
  .alm-cart-empty-cta {
    width: 100% !important;
    padding: 0.68rem 1rem !important;
    font-size: 0.84rem !important;
    justify-content: center !important;
    white-space: normal !important;
    text-align: center !important;
    border-radius: 9999px !important;
  }
  .alm-cart-empty-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.35rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0.45rem 0 0.65rem !important;
  }
  .alm-cart-grid-card {
    display: flex !important;
    align-items: center !important;
    padding: 0.45rem 0.45rem !important;
    border-radius: 10px !important;
    gap: 0.35rem !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    background: #FAF8F5 !important;
    border: 1px solid rgba(197, 168, 128, 0.28) !important;
  }
  .grid-card-icon {
    font-size: 1.1rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }
  .grid-card-text {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
    text-align: left !important;
  }
  .grid-card-text strong {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: var(--color-slate-900) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }
  .grid-card-text small {
    font-size: 0.6rem !important;
    color: var(--color-slate-500) !important;
    margin-top: 0.1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }
  .grid-card-arrow {
    display: none !important;
  }
  .alm-cart-empty-trust {
    font-size: 0.62rem !important;
    gap: 0.3rem !important;
    margin-top: 0.25rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Cart page horizontal bestseller carousel on mobile */
  #cartPageContainer .alm-carousel-track {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    gap: 0.55rem !important;
    padding: 0.25rem 0.15rem 0.75rem !important;
    -webkit-overflow-scrolling: touch !important;
  }
  #cartPageContainer .alm-carousel-track .alm-product-card {
    grid-column: auto !important;
    flex: 0 0 165px !important;
    min-width: 155px !important;
    max-width: 175px !important;
    flex-shrink: 0 !important;
    scroll-snap-align: start !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    border: 1px solid rgba(197, 168, 128, 0.22) !important;
    padding: 0 !important;
  }
  #cartPageContainer .alm-carousel-track .alm-product-card .alm-product-media {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
  }
}

/* ==========================================================================
   ORDER CONFIRMATION (BESTELLUNG-BESTAETIGT.HTML)
   ========================================================================== */
.alm-confirm-wrapper {
  max-width: 860px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.alm-confirm-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2.75rem; /* Generous padding on desktop */
  box-shadow: var(--shadow-hover);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Hero Status Block */
.alm-confirm-hero {
  text-align: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-slate-200);
}

.alm-pulsing-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.15rem;
  background-color: rgba(197, 168, 128, 0.16);
  color: var(--color-cyber-dark);
  border: 1px solid var(--color-cyber-lime);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.alm-pulse-dot {
  width: 8px;
  height: 8px;
  background-color: var(--color-cyber-lime);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--color-cyber-lime);
  animation: almPulse 1.8s infinite ease-in-out;
}

.alm-confirm-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--color-slate-900);
  margin-bottom: 0.5rem;
}

.alm-confirm-subtitle {
  color: var(--color-slate-600);
  font-size: 0.95rem;
  max-width: 580px;
  margin: 0 auto;
}

/* 4-Step Logistics Stepper */
.alm-stepper-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  position: relative;
  margin: 1rem 0;
}

.alm-step-box {
  background-color: var(--color-slate-50);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-md);
  padding: 1rem 0.75rem;
  text-align: center;
  position: relative;
  transition: var(--transition);
}

.alm-step-box.completed {
  border-color: var(--color-cyber-lime);
  background-color: rgba(16, 185, 129, 0.05);
}

.alm-step-box.active {
  border-color: var(--color-cyber-lime);
  background-color: rgba(16, 185, 129, 0.1);
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.25);
}

.alm-step-num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-slate-400);
  margin-bottom: 0.25rem;
}

.alm-step-box.completed .alm-step-num,
.alm-step-box.active .alm-step-num {
  color: var(--color-cyber-dark);
}

.alm-step-label {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-slate-800);
  line-height: 1.25;
}

.alm-step-desc {
  font-size: 0.68rem;
  color: var(--color-slate-500);
  margin-top: 0.2rem;
}

/* ==========================================================================
   OFFICIAL RECEIPT BOX ERGONOMICS (Desktop & Mobile)
   ========================================================================== */
.alm-receipt-box {
  background: #FAF8F5;
  border: 1.5px solid rgba(197, 168, 128, 0.35);
  border-radius: var(--radius-lg, 16px);
  padding: 1.4rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.04);
  box-sizing: border-box;
  max-width: 100%;
}

.alm-receipt-header {
  display: flex;
  flex-direction: column;
  padding-bottom: 0.85rem;
  border-bottom: 1px dashed rgba(197, 168, 128, 0.4);
  gap: 0.75rem;
  box-sizing: border-box;
  width: 100%;
}

.alm-receipt-header-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1.25rem;
  width: 100%;
  box-sizing: border-box;
}

.alm-receipt-id-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  box-sizing: border-box;
  min-width: 0;
}

.alm-receipt-label {
  font-size: 0.68rem;
  color: var(--color-slate-500, #64748B);
  text-transform: uppercase;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  letter-spacing: 0.03em;
  display: block;
  margin-bottom: 0.15rem;
}

.alm-order-id-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: #ffffff;
  border: 1.5px solid rgba(197, 168, 128, 0.38);
  padding: 0.32rem 0.75rem;
  border-radius: 8px;
  font-family: var(--font-mono, monospace);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--color-slate-900, #0E1524);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  box-sizing: border-box;
  max-width: 100%;
}

#orderNumberVal {
  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
  display: inline-block !important;
}

.alm-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(197, 168, 128, 0.15);
  border: 1px solid rgba(197, 168, 128, 0.3);
  padding: 0.2rem 0.55rem;
  border-radius: 6px;
  font-size: 0.7rem;
  font-family: inherit;
  font-weight: 700;
  color: #8F6F3A;
  cursor: pointer;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.2s ease;
}

.alm-copy-btn:hover {
  background: #0E1524;
  color: #C5A880;
  border-color: #0E1524;
}

.alm-receipt-date-col {
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  flex-shrink: 0;
  box-sizing: border-box;
}

.alm-receipt-date-val {
  font-size: 0.9rem;
  font-weight: 750;
  color: var(--color-slate-800, #1E293B);
  font-family: var(--font-mono, monospace);
  white-space: nowrap !important;
}

.alm-receipt-date-val {
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--color-slate-800, #1E293B);
  font-family: var(--font-mono, monospace);
}

.alm-receipt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
  padding: 0.95rem 0;
  border-bottom: 1px dashed rgba(197, 168, 128, 0.4);
}

.alm-receipt-card-tile {
  background: #ffffff;
  border: 1px solid rgba(197, 168, 128, 0.28);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}

.alm-receipt-field-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  color: #8F6F3A;
  text-transform: uppercase;
  font-family: var(--font-mono, monospace);
  font-weight: 800;
  letter-spacing: 0.02em;
  margin-bottom: 0.45rem;
}

.alm-receipt-field-title svg {
  color: #C5A880;
  flex-shrink: 0;
}

.receipt-customer-name {
  font-weight: 800;
  color: var(--color-slate-900, #0E1524);
  font-size: 0.88rem;
  margin-bottom: 0.15rem;
}

.receipt-customer-address,
.receipt-customer-city {
  font-size: 0.82rem;
  color: var(--color-slate-700, #334155);
  line-height: 1.35;
}

.receipt-customer-phone {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-family: var(--font-mono, monospace);
}

.receipt-customer-phone a {
  color: #64748B;
  text-decoration: none;
  transition: color 0.15s ease;
}

.receipt-customer-phone a:hover {
  color: #0E1524;
}

.receipt-pay-method {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--color-slate-900, #0E1524);
  line-height: 1.3;
  margin-bottom: 0.3rem;
}

.receipt-pay-note {
  font-size: 0.75rem;
  color: var(--color-slate-600, #64748B);
  line-height: 1.4;
}

.alm-receipt-items-block {
  padding: 0.95rem 0;
}

.alm-receipt-items-header {
  margin-bottom: 0.65rem;
}

@media (max-width: 640px) {
  .alm-receipt-box {
    padding: 0.95rem 0.85rem;
    box-sizing: border-box !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }
  .alm-receipt-header {
    padding-bottom: 0.65rem;
    gap: 0.5rem;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .alm-receipt-header-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.6rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .alm-receipt-id-col {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    text-align: left !important;
    gap: 0.35rem !important;
    box-sizing: border-box !important;
  }
  .alm-receipt-label {
    margin-bottom: 0.15rem !important;
    font-size: 0.66rem !important;
    flex-shrink: 0 !important;
  }
  .alm-order-id-chip {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.38rem 0.65rem !important;
    font-size: 0.88rem !important;
    background: #ffffff !important;
    border: 1.5px solid rgba(197, 168, 128, 0.4) !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  }
  #orderNumberVal {
    font-size: 0.92rem !important;
    font-weight: 800 !important;
    color: var(--color-slate-900, #0E1524) !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    flex-shrink: 0 !important;
  }
  .alm-copy-btn {
    padding: 0.2rem 0.5rem !important;
    font-size: 0.68rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
  }
  .alm-receipt-date-col {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding-top: 0.5rem !important;
    border-top: 1px dashed rgba(197, 168, 128, 0.28) !important;
    text-align: left !important;
  }
  .alm-receipt-date-val {
    font-size: 0.82rem;
    text-align: right;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .alm-receipt-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    padding: 0.75rem 0;
  }
  .alm-receipt-card-tile {
    padding: 0.75rem 0.85rem;
  }
  .checkout-summary-item {
    gap: 0.65rem;
    padding: 0.55rem 0;
  }
  .checkout-summary-thumb {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }
  .checkout-summary-title {
    font-size: 0.82rem !important;
    line-height: 1.25 !important;
    -webkit-line-clamp: 3 !important;
  }
  .checkout-summary-price {
    font-size: 0.88rem !important;
    padding-left: 0.35rem !important;
  }
}

/* Neutral Packing Alert */
.alm-neutral-box {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin: 1rem 0;
}

.alm-neutral-icon {
  width: 24px;
  height: 24px;
  color: var(--color-cyber-lime);
  flex-shrink: 0;
  margin-top: 2px;
}

/* Order Confirmation Action Buttons on Desktop */
.alm-confirm-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  padding: 0.5rem 0 1.25rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

.alm-confirm-actions .alm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 44px;
  padding: 0.65rem 1.25rem;
  font-size: 0.88rem;
  font-weight: 750;
  border-radius: 9999px;
  line-height: 1;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.alm-confirm-actions .alm-btn svg {
  flex-shrink: 0;
}

.alm-confirm-actions .alm-btn-print {
  background: #ffffff;
  border: 1.5px solid rgba(197, 168, 128, 0.45);
  color: var(--color-slate-800, #1E293B);
}

.alm-confirm-actions .alm-btn-print:hover {
  background: #FCFAF7;
  border-color: #C5A880;
  color: #0E1524;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(197, 168, 128, 0.18);
}

.alm-confirm-actions .alm-btn-track {
  background: #0E1524;
  color: #ffffff;
  border: 1.5px solid rgba(197, 168, 128, 0.35);
  box-shadow: 0 4px 14px rgba(14, 21, 36, 0.18);
}

.alm-confirm-actions .alm-btn-track:hover {
  background: #172134;
  border-color: #C5A880;
  color: #C5A880;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(14, 21, 36, 0.25);
}

.tracking-live-dot {
  width: 7px;
  height: 7px;
  background: #34D399;
  border-radius: 50%;
  display: inline-block;
  margin-left: 0.25rem;
  box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.3);
  animation: pulseBeacon 2s infinite;
}

/* Support Horizontal Bento Strip on Desktop */
.alm-confirm-support {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.2rem 1.4rem;
  margin-top: 1.25rem;
  background: linear-gradient(135deg, rgba(250, 248, 245, 0.95) 0%, rgba(244, 240, 234, 0.65) 100%);
  border: 1px solid rgba(197, 168, 128, 0.32);
  border-radius: 14px;
  box-sizing: border-box;
}

.alm-confirm-support-content {
  flex: 1 1 auto;
  min-width: 0;
}

.alm-confirm-support-title {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-slate-900, #0E1524);
  line-height: 1.3;
  margin-bottom: 0.2rem;
}

.alm-confirm-support-desc {
  font-size: 0.8rem;
  color: var(--color-slate-600, #475569);
  line-height: 1.4;
  margin-bottom: 0;
}

.alm-confirm-btn-group {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex-shrink: 0;
}

.alm-confirm-support-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  height: 38px;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  font-weight: 700;
  border-radius: 9999px;
  background: #ffffff;
  border: 1.5px solid rgba(197, 168, 128, 0.38);
  color: var(--color-slate-800, #1E293B);
  transition: all 0.2s ease;
  white-space: nowrap;
}

.alm-confirm-support-btn:hover {
  background: #0E1524;
  color: #C5A880;
  border-color: #C5A880;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(10, 15, 26, 0.12);
}

@media (max-width: 768px) {
  .alm-confirm-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .alm-confirm-actions .alm-btn {
    width: 100%;
  }
  .alm-confirm-support {
    flex-direction: column;
    align-items: stretch;
    padding: 1.15rem 1rem;
    gap: 0.9rem;
  }
  .alm-confirm-btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
  }
  .alm-confirm-support-btn {
    width: 100%;
    padding: 0.55rem 0.5rem;
    font-size: 0.78rem;
  }
}

/* ==========================================================================
   CUSTOMER SERVICE FORM & 5-TOPIC BALANCED SELECTOR (KUNDENSERVICE.HTML)
   ========================================================================== */
.alm-topic-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}

.alm-topic-btn {
  flex: 1 1 auto; /* Desktop fills row proportionally */
  min-height: 44px; /* Apple HIG standard */
  padding: 0.65rem 1rem;
  background-color: var(--color-slate-50);
  border: 1px solid var(--color-slate-200);
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-slate-700);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  transition: var(--transition);
  text-align: center;
}

.alm-topic-btn:hover {
  background-color: var(--color-slate-100);
  border-color: var(--color-slate-300);
}

.alm-topic-btn.active {
  background-color: var(--color-slate-900);
  color: #ffffff;
  border-color: var(--color-slate-900);
}

/* Form Controls */
.alm-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.95rem;
}

.alm-label {
  font-size: 0.82rem;
  font-weight: 750;
  color: var(--color-slate-800);
  letter-spacing: 0.01em;
  margin-bottom: 0.1rem;
  display: block;
}

.alm-input, .alm-textarea, .alm-select {
  width: 100%;
  padding: 0.62rem 0.9rem;
  min-height: 42px;
  background: #ffffff;
  border: 1.5px solid rgba(197, 168, 128, 0.45);
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--color-slate-900);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: border-color 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1), 
              background-color 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-sizing: border-box;
}

.alm-input::placeholder,
.alm-textarea::placeholder {
  color: #94A3B8;
  font-weight: 400;
  opacity: 1;
}

.alm-input:hover, .alm-textarea:hover, .alm-select:hover {
  border-color: #C5A880;
  background-color: #FCFAF7;
  box-shadow: 0 2px 8px rgba(197, 168, 128, 0.16);
}

.alm-input:focus, .alm-textarea:focus, .alm-select:focus {
  outline: none;
  background-color: #ffffff;
  border-color: #C5A880;
  border-width: 1.5px;
  box-shadow: 0 0 0 3.5px rgba(197, 168, 128, 0.25), 0 4px 14px rgba(15, 23, 42, 0.06);
}

.alm-textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.5;
}

.alm-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23C5A880' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2.35rem;
}

/* ==========================================================================
   INTERACTIVE SITTING COMPRESSION CALCULATOR & PRESSURE MAP
   ========================================================================== */
.alm-calc-slider-group {
  margin-bottom: 1.5rem;
}

.alm-calc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5rem;
}

.alm-calc-val-badge {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--color-cyber-dark);
  background: rgba(197, 168, 128, 0.16);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
}

.alm-range-input {
  width: 100%;
  -webkit-appearance: none;
  height: 6px;
  background: var(--color-slate-200);
  border-radius: var(--radius-pill);
  outline: none;
}

.alm-range-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-slate-900);
  border: 2px solid var(--color-cyber-lime);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.alm-calc-result-box {
  background: var(--color-slate-900);
  color: #ffffff;
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Pressure Map Container */
.alm-map-container {
  background: var(--color-slate-950);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  color: #ffffff;
}

.alm-map-switch {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-pill);
  padding: 4px;
  gap: 4px;
}

.alm-map-toggle-btn {
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-slate-400);
  transition: var(--transition);
}

.alm-map-toggle-btn.active {
  background: #ffffff;
  color: var(--color-slate-950);
}

/* ==========================================================================
   DSGVO & TTDSG COOKIE & PRIVACY SYSTEM (OBSIDIAN TITANIUM & BRONZE)
   ========================================================================== */

/* 1. Persistent Floating Privacy & Cookie Trigger Badge */
.alm-cookie-trigger-btn {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 190;
  height: 40px;
  padding: 0 0.85rem;
  background: rgba(8, 12, 20, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(197, 168, 128, 0.35);
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-bronze-primary);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  transition: all 0.25s ease;
}

.alm-cookie-trigger-btn:hover {
  background: rgba(14, 21, 36, 0.95);
  border-color: var(--color-bronze-primary);
  box-shadow: 0 0 16px rgba(197, 168, 128, 0.35);
  transform: translateY(-2px);
  color: var(--color-bronze-light);
}

.trigger-shield-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-bronze-primary);
}

.trigger-shield-icon svg {
  width: 19px;
  height: 19px;
  display: block;
}

.trigger-text {
  color: var(--color-slate-200);
  letter-spacing: 0.02em;
}

.trigger-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #34D399;
  box-shadow: 0 0 8px #34D399;
  display: inline-block;
}

@media (max-width: 768px) {
  .alm-cookie-trigger-btn {
    bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
    left: 0.85rem;
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 21, 36, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(197, 168, 128, 0.48);
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 12px rgba(197, 168, 128, 0.2);
    opacity: 0.92;
    z-index: 90;
    transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .alm-cookie-trigger-btn:hover,
  .alm-cookie-trigger-btn:active {
    opacity: 1;
    transform: scale(1.08);
    border-color: var(--color-bronze-primary, #C5A880);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 16px rgba(197, 168, 128, 0.35);
  }
  .alm-cookie-trigger-btn svg,
  .alm-cookie-trigger-btn .trigger-shield-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.2;
    color: var(--color-bronze-primary, #C5A880);
    display: block;
  }
  .alm-cookie-trigger-btn .trigger-text,
  .alm-cookie-trigger-btn .trigger-status-dot {
    display: none;
  }
}

/* 2. Initial Bottom Cookie Banner */
.alm-cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  max-width: 540px;
  background: rgba(10, 15, 26, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(197, 168, 128, 0.3);
  border-radius: var(--radius-xl);
  padding: 1.4rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65);
  z-index: 300;
  display: none;
  flex-direction: column;
  gap: 0.85rem;
  animation: almSlideUp 0.3s ease;
}

.alm-cookie-banner.active {
  display: flex;
}

.alm-cookie-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  letter-spacing: -0.01em;
}

.alm-cookie-title svg {
  color: var(--color-bronze-primary);
}

.alm-cookie-text {
  font-size: 0.78rem;
  color: var(--color-slate-300);
  line-height: 1.45;
  margin: 0;
}

.alm-cookie-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.25rem;
}

.alm-cookie-btn-group .alm-btn {
  font-size: 0.76rem;
  padding: 0.45rem 0.85rem;
}

/* 3. Dedicated Professional Cookie & Privacy Settings Modal */
.alm-cookie-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(4, 7, 13, 0.8);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 400;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.alm-cookie-modal-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.alm-cookie-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  width: 92%;
  max-width: 620px;
  max-height: 88vh;
  background: #0A0F1A;
  border: 1px solid rgba(197, 168, 128, 0.3);
  border-radius: var(--radius-xl);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.75);
  z-index: 401;
  opacity: 0;
  visibility: hidden;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.alm-cookie-modal.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  visibility: visible;
}

.alm-cookie-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(14, 21, 36, 0.6);
}

.alm-cookie-modal-title-group {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.alm-cookie-modal-icon {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
  background: rgba(197, 168, 128, 0.1);
  border: 1px solid rgba(197, 168, 128, 0.25);
  color: var(--color-bronze-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.alm-cookie-modal-title {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
}

.alm-cookie-modal-subtitle {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--color-bronze-primary);
  letter-spacing: 0.05em;
  margin-top: 0.15rem;
}

.alm-cookie-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-slate-400);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
}

.alm-cookie-modal-close:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(197, 168, 128, 0.3);
}

.alm-cookie-modal-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.alm-cookie-modal-intro {
  font-size: 0.78rem;
  color: var(--color-slate-300);
  line-height: 1.5;
  margin: 0;
}

.alm-cookie-category-card {
  background: rgba(14, 21, 36, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding: 0.95rem 1.15rem;
  transition: border-color 0.2s ease;
}

.alm-cookie-category-card:hover {
  border-color: rgba(197, 168, 128, 0.25);
}

.alm-cookie-cat-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.alm-cookie-cat-info {
  flex: 1;
}

.alm-cookie-cat-title-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.alm-cookie-cat-title-row h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: #ffffff;
  margin: 0;
}

.alm-cookie-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  letter-spacing: 0.04em;
}

.alm-cookie-tag.required {
  background: rgba(197, 168, 128, 0.15);
  color: var(--color-bronze-light);
  border: 1px solid rgba(197, 168, 128, 0.3);
}

.alm-cookie-tag.optional {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-slate-300);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.alm-cookie-cat-info p {
  font-size: 0.74rem;
  color: var(--color-slate-400);
  line-height: 1.4;
  margin: 0;
}

/* Custom iOS/Biohack Switch Toggle */
.alm-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
  cursor: pointer;
}

.alm-toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch-slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 9999px;
  transition: all 0.25s ease;
  border: 1px solid rgba(255, 255, 255, 0.15);
}

.switch-slider::before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 2px;
  bottom: 2px;
  background-color: #CBD5E0;
  border-radius: 50%;
  transition: all 0.25s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.alm-toggle-switch input:checked + .switch-slider {
  background-color: var(--color-bronze-primary);
  border-color: var(--color-bronze-primary);
}

.alm-toggle-switch input:checked + .switch-slider::before {
  transform: translateX(20px);
  background-color: #080C14;
}

.alm-toggle-switch.locked {
  cursor: not-allowed;
  opacity: 0.85;
}

.alm-cookie-legal-note {
  font-size: 0.72rem;
  color: var(--color-slate-400);
  line-height: 1.45;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 0.75rem;
}

.alm-cookie-legal-note a {
  color: var(--color-bronze-light);
  text-decoration: underline;
}

.alm-cookie-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 1.5rem;
  background: rgba(14, 21, 36, 0.6);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.alm-cookie-modal-footer .alm-btn-outline,
#btnCookieModalSave {
  background: rgba(197, 168, 128, 0.16) !important;
  color: #FFFFFF !important;
  border: 1.5px solid #C5A880 !important;
  font-weight: 750 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.alm-cookie-modal-footer .alm-btn-outline:hover,
#btnCookieModalSave:hover,
#btnCookieModalSave:active {
  background: rgba(197, 168, 128, 0.28) !important;
  border-color: #D4B890 !important;
  color: #FFFFFF !important;
}

.alm-cookie-modal-footer .alm-btn-subtle,
#btnCookieModalEssential {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #CBD5E1 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  font-weight: 650 !important;
}

.alm-cookie-modal-footer .alm-btn-subtle:hover,
#btnCookieModalEssential:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

.alm-btn-subtle {
  background: transparent;
  color: var(--color-slate-400);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.45rem 0.85rem;
  font-size: 0.76rem;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.alm-btn-subtle:hover {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.05);
}

@keyframes almSlideUp {
  from {
    opacity: 0;
    transform: translateY(15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   ANIMATIONS & KEYFRAMES
   ========================================================================== */
@keyframes almPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.9);
  }
}

@keyframes almHeartPop {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.35);
  }
  100% {
    transform: scale(1);
  }
}

/* ==========================================================================
   FOOTER STYLES — HIGH-PERFORMANCE COMPACT, ADAPTIVE & USER-FRIENDLY
   ========================================================================== */
.alm-footer {
  background-color: #070a11;
  color: var(--color-slate-400);
  padding: 2.75rem 0 1.25rem;
  margin-top: auto;
  border-top: 1px solid rgba(197, 168, 128, 0.2);
  position: relative;
  font-size: 0.8rem;
}

/* 1. Value Proposition Trust Strip (Compact) */
.alm-footer-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 1.75rem;
}

.alm-footer-trust-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(14, 21, 36, 0.5);
  border: 1px solid rgba(197, 168, 128, 0.12);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.95rem;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.alm-footer-trust-item:hover {
  transform: translateY(-2px);
  border-color: var(--color-bronze-primary);
  background: rgba(14, 21, 36, 0.85);
}

.alm-footer-trust-icon {
  width: 36px;
  height: 36px;
  min-width: 36px;
  border-radius: 8px;
  background: rgba(197, 168, 128, 0.1);
  border: 1px solid rgba(197, 168, 128, 0.2);
  color: var(--color-bronze-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.alm-footer-trust-content h4 {
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.alm-footer-trust-content p {
  color: var(--color-slate-400);
  font-size: 0.74rem;
  line-height: 1.35;
  margin: 0;
}

/* 2. Newsletter / Pelvic Health Briefing Bar (Compact Horizontal) */
.alm-footer-newsletter-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem;
  background: linear-gradient(135deg, rgba(14, 21, 36, 0.9) 0%, rgba(23, 32, 51, 0.6) 100%);
  border: 1px solid rgba(197, 168, 128, 0.22);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.65rem;
  margin-bottom: 2rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow: hidden;
}

.alm-footer-newsletter-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-bronze-primary), transparent);
}

.alm-footer-newsletter-text {
  flex: 1 1 auto;
}

.alm-footer-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-bronze-primary);
  background: rgba(197, 168, 128, 0.08);
  border: 1px solid rgba(197, 168, 128, 0.18);
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  margin-bottom: 0.35rem;
  letter-spacing: 0.04em;
}

.alm-footer-newsletter-title {
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.alm-footer-newsletter-desc {
  color: var(--color-slate-300);
  font-size: 0.78rem;
  line-height: 1.4;
  margin: 0;
  max-width: 520px;
}

.alm-footer-newsletter-form-wrapper {
  flex: 0 0 420px;
  max-width: 420px;
}

.alm-footer-input-group {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(8, 12, 20, 0.9);
  border: 1.5px solid rgba(197, 168, 128, 0.45);
  border-radius: 10px;
  padding: 0.35rem 0.35rem 0.35rem 0.95rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.alm-footer-input-group:hover {
  border-color: #C5A880;
  box-shadow: 0 0 12px rgba(197, 168, 128, 0.2);
}

.alm-footer-input-group:focus-within {
  border-color: #C5A880;
  box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.3), 0 0 16px rgba(197, 168, 128, 0.25);
}

.alm-footer-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: #ffffff;
  font-size: 0.88rem;
  font-family: inherit;
}

.alm-footer-input::placeholder {
  color: #94A3B8;
  font-weight: 400;
  opacity: 1;
}

.alm-footer-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
  padding: 0.5rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  border-radius: 6px;
  background: var(--color-bronze-primary);
  color: #080C14;
  border: 1px solid var(--color-bronze-primary);
  cursor: pointer;
  transition: all 0.2s ease;
}

.alm-footer-submit-btn:hover {
  background: var(--color-bronze-hover);
  box-shadow: 0 4px 10px rgba(197, 168, 128, 0.3);
}

.alm-footer-newsletter-privacy {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  color: var(--color-slate-400);
  margin-top: 0.4rem;
}

.alm-footer-feedback {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  display: none;
  color: #34D399;
}

/* 3. Main Multi-Column Navigation (Compact Spacing) */
.alm-footer-main-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr 1.15fr;
  gap: 1.75rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.alm-footer-col {
  display: flex;
  flex-direction: column;
}

.alm-footer-brand-desc {
  font-size: 0.78rem;
  color: var(--color-slate-400);
  line-height: 1.45;
  margin-bottom: 0.85rem;
}

.alm-footer-contact-card {
  background: rgba(14, 21, 36, 0.45);
  border: 1px solid rgba(197, 168, 128, 0.12);
  border-radius: var(--radius-md);
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.alm-footer-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.75rem;
}

.alm-contact-icon {
  color: var(--color-bronze-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.alm-contact-label {
  display: block;
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--color-slate-400);
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
}

.alm-contact-value {
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}

.alm-contact-value:hover {
  color: var(--color-bronze-primary);
  text-decoration: underline;
}

.alm-contact-sub {
  display: block;
  font-size: 0.68rem;
  color: var(--color-slate-400);
  line-height: 1.25;
  margin-top: 0.1rem;
}

.alm-contact-text {
  color: var(--color-slate-300);
  font-size: 0.74rem;
  line-height: 1.35;
  display: block;
}

.alm-footer-status-indicator {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  color: var(--color-slate-400);
  background: rgba(197, 168, 128, 0.05);
  border: 1px solid rgba(197, 168, 128, 0.15);
  border-radius: 6px;
  padding: 0.35rem 0.65rem;
}

.alm-footer-status-indicator strong {
  color: #34D399;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #34D399;
  box-shadow: 0 0 6px #34D399;
  display: inline-block;
  flex-shrink: 0;
}

.alm-footer-heading {
  color: #ffffff;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
  font-family: var(--font-mono);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.alm-footer-toggle-icon {
  display: none;
}

.alm-footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0;
  margin: 0;
}

.alm-footer-links li a {
  font-size: 0.78rem;
  color: var(--color-slate-400);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all 0.2s ease;
  line-height: 1.35;
}

.link-arrow {
  color: var(--color-bronze-primary);
  font-size: 0.85rem;
  line-height: 1;
  opacity: 0.7;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.alm-footer-links li a:hover {
  color: #ffffff;
  transform: translateX(3px);
}

.alm-footer-links li a:hover .link-arrow {
  opacity: 1;
  transform: translateX(2px);
}

.alm-footer-headquarters-mini {
  margin-top: 0.85rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 0.7rem;
  color: var(--color-slate-400);
  line-height: 1.4;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.hq-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  color: var(--color-bronze-primary);
  letter-spacing: 0.04em;
}

.hq-sub {
  color: var(--color-slate-400);
  font-size: 0.68rem;
}

/* 4. Payment & Shipping Badge Strip (Compact) */
.alm-footer-badges-strip {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.alm-footer-badge-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.alm-badge-group-title {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--color-slate-400);
  letter-spacing: 0.04em;
  min-width: 220px;
}

.alm-badge-chips {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.alm-badge-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--color-slate-300);
  background: rgba(14, 21, 36, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 5px;
  padding: 0.22rem 0.55rem;
  transition: all 0.2s ease;
}

.alm-badge-chip:hover {
  background: rgba(23, 32, 51, 0.8);
  border-color: rgba(197, 168, 128, 0.3);
  color: #ffffff;
}

.alm-badge-highlight {
  background: rgba(197, 168, 128, 0.12);
  border-color: rgba(197, 168, 128, 0.35);
  color: var(--color-bronze-light);
  font-weight: 600;
}

.alm-badge-security {
  background: rgba(16, 185, 129, 0.08);
  border-color: rgba(16, 185, 129, 0.25);
  color: #6EE7B7;
}

/* 5. Medical Disclaimer Box (Compact) */
.alm-footer-disclaimer-box {
  background: rgba(8, 12, 20, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 3px solid var(--color-bronze-primary);
  border-radius: var(--radius-md);
  padding: 0.65rem 1rem;
  margin: 1.25rem 0 1.25rem;
}

.alm-disclaimer-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-bronze-primary);
  margin-bottom: 0.25rem;
  letter-spacing: 0.02em;
}

.alm-disclaimer-text {
  font-size: 0.7rem;
  color: var(--color-slate-400);
  line-height: 1.45;
  margin: 0;
}

/* 6. Bottom Bar (Compact) */
.alm-footer-bottom-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  font-size: 0.74rem;
  color: var(--color-slate-400);
  flex-wrap: wrap;
  gap: 0.85rem;
}

.alm-footer-copyright {
  flex: 1 1 auto;
}

.alm-footer-region-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(14, 21, 36, 0.7);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 9999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.72rem;
  color: var(--color-slate-300);
}

.alm-footer-top-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(14, 21, 36, 0.8);
  border: 1px solid rgba(197, 168, 128, 0.3);
  color: var(--color-bronze-light);
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.alm-footer-top-btn:hover {
  background: var(--color-bronze-primary);
  color: #080C14;
  border-color: var(--color-bronze-primary);
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(197, 168, 128, 0.3);
}

/* Backward compatibility */
.alm-footer-top {
  display: none;
}
.alm-footer-bottom {
  display: none;
}

/* ==========================================================================
   RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media (max-width: 1024px) {
  :root {
    --header-height: 112px;
  }
  .col-8, .col-7, .col-6, .col-5, .col-4, .col-3 {
    grid-column: span 12;
  }
  #catalogGrid .alm-product-card,
  #mainProductGrid .alm-product-card {
    grid-column: span 6;
  }
  .alm-mobile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .alm-header-nav-bar {
    display: none !important;
  }
  .alm-search-box {
    width: 280px;
  }
  .alm-header-hotline-pill {
    display: none;
  }
  .alm-nav-telemetry-tag {
    display: none;
  }
  .alm-top-ticker-inner {
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    text-align: center;
  }
  .alm-ticker-status {
    display: none;
  }
  .alm-footer-trust-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }
  .alm-footer-newsletter-card {
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem 1.5rem;
    gap: 1rem;
  }
  .alm-footer-newsletter-form-wrapper {
    max-width: 100%;
    flex: 1 1 auto;
  }
  .alm-footer-main-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding-bottom: 1.75rem;
  }
  .alm-footer-col-brand {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  :root {
    --header-height: 56px;
  }
  .alm-top-ticker {
    padding: 0.28rem 0.5rem !important;
    overflow: hidden !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .alm-top-ticker-inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .alm-ticker-status,
  .alm-ticker-logistics,
  .ticker-promo-copy-hint {
    display: none !important;
  }
  .alm-ticker-promo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    max-width: 100% !important;
    padding: 0.18rem 0.55rem !important;
    gap: 0.35rem !important;
    font-size: 0.68rem !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }
  .ticker-promo-tag {
    font-size: 0.62rem !important;
    padding: 0.08rem 0.3rem !important;
    background: rgba(197, 168, 128, 0.2) !important;
    border-radius: 4px !important;
  }
  .ticker-promo-text {
    font-size: 0.64rem !important;
  }
  .ticker-promo-code {
    font-size: 0.66rem !important;
    padding: 0.1rem 0.35rem !important;
    letter-spacing: 0.05em !important;
  }
  .alm-search-box {
    display: none !important;
  }
  .alm-header-primary {
    height: 56px !important;
  }
  /* Hide Desktop Navigation Bar on Mobile - Full Drawer Navigation */
  .alm-header-nav-bar {
    display: none !important;
  }

  .alm-header-nav-inner::-webkit-scrollbar {
    display: none;
  }

  .alm-nav {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    list-style: none;
  }

  .alm-nav-item {
    display: inline-flex;
    flex-shrink: 0;
  }

  .alm-nav-link {
    font-size: 0.78rem;
    font-weight: 700;
    padding: 0.28rem 0.65rem;
    border-radius: var(--radius-pill);
    background: var(--color-slate-50);
    border: 1px solid var(--border-light);
    color: var(--color-slate-800);
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    text-decoration: none;
    flex-shrink: 0;
  }

  .alm-nav-link.active {
    background: #0E1524;
    color: #ffffff;
    border-color: #0E1524;
  }

  .alm-nav-link.active::after {
    display: none;
  }

  .alm-nav-link:hover {
    background: rgba(197, 168, 128, 0.16);
  }

  .alm-nav-link .dropdown-chevron {
    display: none !important;
  }

  /* CRITICAL: Never allow floating dropdown cards on mobile/touch screens! */
  .alm-nav-dropdown-menu {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .alm-nav-trust-chip {
    display: none !important;
  }
  .alm-section {
    padding: 2.5rem 0;
  }
  .alm-container {
    padding: 0 1rem;
  }
  .bento-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .col-12 {
    grid-column: span 1;
  }

  /* Header adjustments */
  .alm-search-box {
    display: none; /* Accessible via mobile search button if needed */
  }

  /* Cart Drawer Mobile Full width */
  .alm-drawer {
    max-width: 100%;
  }

  /* Order confirmation padding requirements */
  .alm-confirm-card {
    padding: 1.25rem 1rem; /* Exact requirement: 1.25rem 1rem on mobile */
  }

  /* Logistics stepper on mobile */
  .alm-stepper-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* Support buttons on mobile: 50% / 50% grid */
  .alm-confirm-btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
  }
  .alm-confirm-btn-group .alm-btn {
    width: 100%;
    padding: 0.65rem 0.5rem;
    font-size: 0.78rem;
  }

  /* Support topics on mobile: 2-column balanced grid with row 3 full width */
  .alm-topic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }
  .alm-topic-btn {
    width: 100%;
    min-height: 44px; /* Apple HIG standard */
    font-size: 0.78rem;
    padding: 0.5rem;
  }
  .alm-topic-btn:nth-child(5) {
    grid-column: 1 / -1; /* Row 3 full width centered */
  }

  /* Cookie Trigger and Banner on mobile */
  .alm-cookie-trigger-btn {
    bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
    left: 0.85rem;
    width: 42px;
    height: 42px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(14, 21, 36, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(197, 168, 128, 0.48);
    border-radius: 50%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45), 0 0 12px rgba(197, 168, 128, 0.2);
    opacity: 0.92;
    z-index: 90;
    transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  }
  .alm-cookie-trigger-btn:hover,
  .alm-cookie-trigger-btn:active {
    opacity: 1;
    transform: scale(1.08);
    border-color: var(--color-bronze-primary, #C5A880);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 16px rgba(197, 168, 128, 0.35);
  }
  .alm-cookie-trigger-btn svg,
  .alm-cookie-trigger-btn .trigger-shield-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.2;
    color: var(--color-bronze-primary, #C5A880);
    display: block;
  }
  .alm-cookie-trigger-btn .trigger-text,
  .alm-cookie-trigger-btn .trigger-status-dot {
    display: none;
  }
  .alm-cookie-banner {
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-width: 100%;
    border-left: none;
    border-right: none;
    border-bottom: none;
    padding: 1.15rem 1rem;
  }
  .alm-cookie-modal {
    width: min(94vw, 480px) !important;
    max-height: 86vh !important;
    border-radius: 18px !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.8) !important;
    border: 1px solid rgba(197, 168, 128, 0.35) !important;
  }
  .alm-cookie-modal-header {
    padding: 0.85rem 1rem !important;
    gap: 0.5rem !important;
  }
  .alm-cookie-modal-title-group {
    gap: 0.6rem !important;
    flex: 1 !important;
    min-width: 0 !important;
  }
  .alm-cookie-modal-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 8px !important;
  }
  .alm-cookie-modal-icon svg {
    width: 18px !important;
    height: 18px !important;
  }
  .alm-cookie-modal-title {
    font-size: 0.92rem !important;
    line-height: 1.25 !important;
    font-weight: 750 !important;
  }
  .alm-cookie-modal-subtitle {
    font-size: 0.56rem !important;
    letter-spacing: 0.03em !important;
    margin-top: 0.1rem !important;
    line-height: 1.2 !important;
  }
  .alm-cookie-modal-close {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    flex-shrink: 0 !important;
  }
  .alm-cookie-modal-body {
    padding: 0.75rem 1rem !important;
    gap: 0.6rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(197, 168, 128, 0.4) transparent !important;
  }
  .alm-cookie-modal-body::-webkit-scrollbar {
    width: 4px !important;
  }
  .alm-cookie-modal-body::-webkit-scrollbar-thumb {
    background: rgba(197, 168, 128, 0.35) !important;
    border-radius: 4px !important;
  }
  .alm-cookie-modal-intro {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    color: #94A3B8 !important;
    margin-bottom: 0.1rem !important;
  }
  .alm-cookie-category-card {
    padding: 0.65rem 0.8rem !important;
    border-radius: 12px !important;
    background: rgba(14, 21, 36, 0.65) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
  }
  .alm-cookie-cat-header {
    gap: 0.65rem !important;
    align-items: center !important;
  }
  .alm-cookie-cat-title-row {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 0.35rem 0.5rem !important;
    margin-bottom: 0.2rem !important;
  }
  .alm-cookie-cat-title-row h4 {
    font-size: 0.82rem !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
  }
  .alm-cookie-tag {
    font-size: 0.55rem !important;
    padding: 0.1rem 0.35rem !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
  }
  .alm-cookie-cat-info p {
    font-size: 0.68rem !important;
    line-height: 1.35 !important;
    color: #94A3B8 !important;
  }
  .alm-toggle-switch {
    width: 40px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
  }
  .switch-slider::before {
    height: 16px !important;
    width: 16px !important;
    left: 2px !important;
    bottom: 2px !important;
  }
  .alm-toggle-switch input:checked + .switch-slider::before {
    transform: translateX(18px) !important;
  }
  .alm-cookie-legal-note {
    font-size: 0.68rem !important;
    line-height: 1.35 !important;
    padding-top: 0.5rem !important;
    color: #94A3B8 !important;
  }
  .alm-cookie-modal-footer {
    padding: 0.75rem 1rem !important;
    gap: 0.4rem !important;
    display: flex !important;
    flex-direction: column !important;
    background: rgba(10, 15, 26, 0.95) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }
  .alm-cookie-modal-footer .alm-btn {
    width: 100% !important;
    height: 42px !important;
    min-height: 42px !important;
    font-size: 0.82rem !important;
    font-weight: 750 !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }
  #btnCookieModalAcceptAll {
    background: linear-gradient(135deg, #C5A880 0%, #8C6738 100%) !important;
    color: #080C14 !important;
    font-weight: 800 !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(140, 103, 56, 0.3) !important;
  }
  #btnCookieModalSave {
    background: rgba(197, 168, 128, 0.16) !important;
    border: 1.5px solid #C5A880 !important;
    color: #FFFFFF !important;
    font-weight: 750 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
  }
  #btnCookieModalSave:hover,
  #btnCookieModalSave:active {
    background: rgba(197, 168, 128, 0.28) !important;
    border-color: #D4B890 !important;
    color: #FFFFFF !important;
  }
  #btnCookieModalEssential {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: #CBD5E1 !important;
    font-weight: 650 !important;
  }
  #btnCookieModalEssential:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
  }

  /* Tier selector on mobile */
  .alm-tier-selector {
    grid-template-columns: 1fr;
  }

  .alm-footer {
    padding: 2rem 0 1rem;
  }
  .alm-footer-trust-strip {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1.25rem;
  }
  .alm-footer-trust-item {
    padding: 0.65rem 0.75rem;
  }
  .alm-footer-newsletter-card {
    padding: 1rem;
    margin-bottom: 1.5rem;
    gap: 0.85rem;
  }
  .alm-footer-input-group {
    flex-direction: column;
    padding: 0.35rem;
  }
  .alm-footer-input {
    width: 100%;
    padding: 0.4rem;
  }
  .alm-footer-submit-btn {
    width: 100%;
    justify-content: center;
  }
  .alm-footer-main-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding-bottom: 1.25rem;
  }
  .alm-footer-col-brand {
    grid-column: span 1;
  }
  .alm-footer-heading {
    cursor: pointer;
    margin-bottom: 0.5rem;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
  .alm-footer-toggle-icon {
    display: inline-block;
    transition: transform 0.25s ease;
  }
  .alm-footer-col.collapsed .alm-footer-links {
    display: none;
  }
  .alm-footer-col.collapsed .alm-footer-toggle-icon {
    transform: rotate(-90deg);
  }
  .alm-footer-links li a {
    min-height: 36px;
    display: flex;
    align-items: center;
  }
  .alm-footer-bottom-bar {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }
  .alm-footer-top-btn {
    width: 100%;
    justify-content: center;
  }
}



/* ==========================================================================
   ADVANCED GERMAN BIOHACKING & PELVIC MECHANICS UI/UX DESIGN SYSTEM
   ========================================================================== */

/* 1. Radar Beacons & Live Telemetry Glows */
.radar-beacon {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 7px;
  height: 7px;
  min-width: 7px;
  min-height: 7px;
  border-radius: 50%;
  background-color: var(--color-cyber-lime);
  margin-right: 0.45rem;
  flex-shrink: 0;
  vertical-align: middle;
  box-shadow: 0 0 6px var(--color-cyber-lime);
}

.radar-beacon::after {
  content: '';
  position: absolute;
  top: -2.5px;
  left: -2.5px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 1px solid var(--color-cyber-lime);
  opacity: 0.85;
  animation: radarWave 2.2s cubic-bezier(0.1, 0.6, 0.4, 1) infinite;
  pointer-events: none;
  box-sizing: border-box;
}

.radar-beacon.danger {
  background-color: var(--color-danger);
  box-shadow: 0 0 6px var(--color-danger);
}
.radar-beacon.danger::after {
  border-color: var(--color-danger);
}

@keyframes radarWave {
  0% { transform: scale(0.7); opacity: 0.95; }
  100% { transform: scale(1.6); opacity: 0; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 15px rgba(16, 185, 129, 0.2); }
  50% { box-shadow: 0 0 30px rgba(16, 185, 129, 0.45); }
}

/* 2. Technical Precision Dot Matrix & Carbon Grids */
.tech-grid-bg {
  background-image: radial-gradient(rgba(197, 168, 128, 0.16) 1px, transparent 1px);
  background-size: 22px 22px;
}

.tech-grid-dark {
  background-color: #0B1120;
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 30px 30px;
}

/* 3. In-Page Telemetry & Quick Navigation Ribbon (Sticky & ScrollSpy Contained) */
.alm-quick-nav {
  position: -webkit-sticky;
  position: sticky;
  top: var(--header-height, 112px);
  z-index: 95;
  background: rgba(11, 17, 32, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(197, 168, 128, 0.22);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.32);
  padding: 0.35rem 0;
  width: 100%;
  transition: top 0.2s ease, background 0.2s ease;
}

/* Offset for in-page anchors when jumping with sticky header + quick-nav */
html {
  scroll-behavior: smooth;
}

#diagnostik-suite,
.diagnostic-suite-switcher,
.diagnostic-tab-panel,
#biomarker,
#anatomie-hud,
#diagPanelHud,
#diagnose-wizard,
#diagPanelWizard,
#rechner,
#diagPanelRechner,
#split-vergleich,
#diagPanelSplit,
#vitrine,
#pakete,
#experten,
#faq {
  scroll-margin-top: 170px;
}

.alm-quick-nav-container {
  max-width: var(--max-width, 1280px);
  width: 100%;
  margin: 0 auto;
  padding: 0.2rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
}

.alm-quick-nav-container::-webkit-scrollbar {
  display: none;
}

.alm-quick-nav-status {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--color-cyber-lime);
  white-space: nowrap;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  padding: 0.2rem 0.55rem 0.2rem 0.45rem;
  background: rgba(197, 168, 128, 0.08);
  border: 1px solid rgba(197, 168, 128, 0.25);
  border-radius: var(--radius-pill);
  transition: all 0.2s ease;
}

.alm-quick-nav-divider {
  display: inline-block;
  width: 1px;
  height: 16px;
  background: rgba(197, 168, 128, 0.25);
  flex-shrink: 0;
}

.alm-quick-nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.alm-quick-nav-pill {
  font-size: 0.72rem;
  font-weight: 650;
  color: var(--color-slate-300);
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  flex-shrink: 0;
}

.alm-quick-nav-pill:hover {
  background: rgba(197, 168, 128, 0.18);
  color: #ffffff;
  border-color: rgba(197, 168, 128, 0.4);
  transform: translateY(-1px);
}

.alm-quick-nav-pill.active {
  background: var(--color-cyber-lime);
  color: #080C14 !important;
  font-weight: 800;
  border-color: #DFCEB0;
  box-shadow: 0 0 14px rgba(197, 168, 128, 0.5);
  transform: translateY(-1px);
}

@media (max-width: 1080px) {
  .alm-quick-nav-container {
    justify-content: flex-start;
    padding: 0.2rem 1rem;
  }
}

@media (max-width: 991px) {
  .alm-quick-nav {
    top: var(--header-height, 102px);
  }
  #diagnostik-suite,
  .diagnostic-suite-switcher,
  .diagnostic-tab-panel,
  #biomarker,
  #anatomie-hud,
  #diagPanelHud,
  #diagnose-wizard,
  #diagPanelWizard,
  #rechner,
  #diagPanelRechner,
  #split-vergleich,
  #diagPanelSplit,
  #vitrine,
  #pakete,
  #experten,
  #faq {
    scroll-margin-top: 155px;
  }
}

/* Phone mode: hide telemetry quick-nav ribbon completely to maximize visible viewport */
@media (max-width: 768px) {
  .alm-quick-nav {
    display: none !important;
  }
  #diagnostik-suite,
  .diagnostic-suite-switcher,
  .diagnostic-tab-panel,
  #biomarker,
  #anatomie-hud,
  #diagPanelHud,
  #diagnose-wizard,
  #diagPanelWizard,
  #rechner,
  #diagPanelRechner,
  #split-vergleich,
  #diagPanelSplit,
  #vitrine,
  #pakete,
  #experten,
  #faq {
    scroll-margin-top: 72px;
  }
}

/* 4. Interactive Hero Pressure Switcher (Before / After A/B Mode) */
.hero-compare-box {
  background: rgba(15, 23, 42, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  margin-top: 1.5rem;
  position: relative;
  overflow: hidden;
}

.hero-toggle-bar {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  background: rgba(0, 0, 0, 0.35);
  padding: 0.3rem;
  border-radius: 8px;
}

.hero-toggle-btn {
  flex: 1;
  padding: 0.6rem 0.8rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 800;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: transparent;
  color: var(--color-slate-400);
}

.hero-toggle-btn.active.is-standard {
  background: rgba(239, 68, 68, 0.2);
  color: #F87171;
  border-color: rgba(239, 68, 68, 0.5);
}

.hero-toggle-btn.active.is-muffintop {
  background: rgba(16, 185, 129, 0.2);
  color: var(--color-cyber-lime);
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.25);
}

.compare-display-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.compare-stat-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 0.85rem;
  transition: all 0.3s ease;
}

/* 5. Four Critical Points Problem-Solution Flow Ribbon */
.flow-ribbon-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  align-items: stretch;
}

.flow-step-card {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.25rem 1.45rem;
  position: relative;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: var(--shadow-bento);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  box-sizing: border-box;
  height: 100%;
}

.flow-step-card:hover {
  transform: translateY(-4px);
  border-color: rgba(197, 168, 128, 0.55);
  box-shadow: var(--shadow-hover);
}

.flow-step-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-slate-500, #64748B);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flow-step-title {
  font-size: 1.05rem;
  font-weight: 850;
  color: var(--color-slate-900);
  line-height: 1.28;
  margin-bottom: 0.65rem;
  letter-spacing: -0.015em;
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
}

.flow-step-problem {
  font-size: 0.78rem;
  color: #DC2626;
  background: rgba(239, 68, 68, 0.06);
  border: 1px solid rgba(239, 68, 68, 0.18);
  border-radius: 8px;
  padding: 0.45rem 0.65rem;
  font-weight: 750;
  line-height: 1.35;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  min-height: 2.85em;
  box-sizing: border-box;
}

.flow-problem-icon {
  color: #DC2626;
  font-weight: 850;
  flex-shrink: 0;
  line-height: 1.2;
}

.flow-problem-text {
  flex: 1;
  min-width: 0;
  word-break: normal;
  overflow-wrap: break-word;
}

.flow-step-solution {
  font-size: 0.8rem;
  color: var(--color-slate-600);
  line-height: 1.48;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.flow-solution-tag {
  color: var(--color-slate-900);
  font-weight: 800;
  margin-bottom: 0.2rem;
  display: block;
}

.flow-solution-text {
  display: block;
}

/* 6. Interactive Clinical FAQ Accordion */
.alm-faq-item {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: 0.85rem;
  background: #ffffff;
  overflow: hidden;
  transition: all 0.25s ease;
}

.alm-faq-item.active {
  border-color: var(--color-cyber-lime);
  box-shadow: 0 4px 16px rgba(197, 168, 128, 0.16);
}

.alm-faq-header {
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  background: #ffffff;
  transition: background 0.2s ease;
  gap: 1.25rem;
}

.alm-faq-header:hover {
  background: var(--bg-card-subtle);
}

.alm-faq-item.active .alm-faq-header {
  background: rgba(16, 185, 129, 0.04);
}

.alm-faq-question {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--color-slate-900);
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  flex: 1;
  min-width: 0;
  line-height: 1.45;
}

.alm-faq-num,
.alm-faq-question > span:first-child {
  color: var(--color-cyber-dark);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 800;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  display: inline-block !important;
  min-width: 28px !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;
}

.alm-faq-question > span:last-child {
  flex: 1;
  min-width: 0;
}

.alm-faq-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  background: var(--color-slate-100);
  color: var(--color-slate-700);
  display: flex;
  align-items: center;
  justify-content: center;
  transform-origin: center center;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
  align-self: center;
  margin: 0;
}

.alm-faq-icon svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.5;
  display: block;
  margin: auto;
  transform-origin: center center;
  transition: transform 0.25s ease;
}

.alm-faq-item.active .alm-faq-icon {
  transform: rotate(45deg);
  background: #C5A880;
  color: #0E1524;
}

.alm-faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), padding 0.25s ease, opacity 0.2s ease;
  padding: 0 1.5rem;
  font-size: 0.92rem;
  color: var(--color-slate-700);
  line-height: 1.7;
  opacity: 0;
  pointer-events: none;
}

.alm-faq-item.active .alm-faq-body {
  max-height: 800px;
  padding: 0.25rem 1.5rem 1.5rem;
  opacity: 1;
  pointer-events: auto;
}

/* 7. Toast Notification (Sleek Compact Glassmorphism Pill) */
.alm-toast {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  top: auto;
  right: auto;
  z-index: 99990 !important;
  background: rgba(14, 21, 36, 0.95);
  color: #ffffff;
  border: 1px solid rgba(197, 168, 128, 0.45);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.38), 0 0 16px rgba(197, 168, 128, 0.15);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: var(--radius-pill, 999px);
  padding: 0.5rem 0.85rem 0.5rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  max-width: 440px;
  transform: translateY(140%) scale(0.95);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

.alm-toast.show {
  transform: translateY(0) scale(1);
  opacity: 1;
  pointer-events: auto;
}

.alm-toast-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-cyber-lime, #10B981);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #090D16;
  font-weight: 850;
  font-size: 0.78rem;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.5);
}

.alm-toast-content {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.alm-toast-title {
  font-weight: 750;
  font-size: 0.82rem;
  color: #ffffff;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 230px;
}

.alm-toast-sub {
  font-size: 0.68rem;
  color: #94a3b8;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 230px;
}

.alm-toast-link {
  margin-left: 0.25rem;
  font-size: 0.72rem;
  font-weight: 750;
  color: #C5A880;
  text-decoration: none;
  white-space: nowrap;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: rgba(197, 168, 128, 0.16);
  border: 1px solid rgba(197, 168, 128, 0.3);
  transition: all 0.15s ease;
  flex-shrink: 0;
}

.alm-toast-link:hover {
  background: #C5A880;
  color: #0E1524;
}

.alm-toast-close {
  background: none;
  border: none;
  color: #94A3B8;
  font-size: 0.82rem;
  padding: 0.2rem 0.35rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: color 0.15s ease, background 0.15s ease;
  margin-left: 0.1rem;
  line-height: 1;
  flex-shrink: 0;
}

.alm-toast-close:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 768px) {
  .alm-toast {
    top: auto !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5.25rem) !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, 140%) scale(0.94);
    max-width: calc(100vw - 2rem) !important;
    width: auto !important;
    padding: 0.45rem 0.75rem 0.45rem 0.65rem !important;
    gap: 0.5rem !important;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.45) !important;
    z-index: 99990 !important;
  }

  .alm-toast.show {
    transform: translate(-50%, 0) scale(1) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .alm-toast-icon {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.72rem !important;
  }

  .alm-toast-title {
    font-size: 0.76rem !important;
    max-width: 160px !important;
  }

  .alm-toast-sub {
    font-size: 0.64rem !important;
    max-width: 160px !important;
  }

  .alm-toast-link {
    font-size: 0.68rem !important;
    padding: 0.18rem 0.48rem !important;
  }

  /* When Cart Drawer is active on mobile, hide the toast so it doesn't obstruct the full-screen drawer or header */
  body.cart-drawer-open .alm-toast,
  body.cart-drawer-open #almToast {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Toast Notification Type Variations */
.alm-toast.toast-danger {
  border-color: rgba(239, 68, 68, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 16px rgba(239, 68, 68, 0.25);
}
.alm-toast.toast-danger .alm-toast-icon {
  background: #EF4444;
  color: #FFFFFF;
  box-shadow: 0 0 8px rgba(239, 68, 68, 0.6);
}

.alm-toast.toast-warning {
  border-color: rgba(245, 158, 11, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 16px rgba(245, 158, 11, 0.25);
}
.alm-toast.toast-warning .alm-toast-icon {
  background: #F59E0B;
  color: #090D16;
  box-shadow: 0 0 8px rgba(245, 158, 11, 0.6);
}

.alm-toast.toast-info {
  border-color: rgba(197, 168, 128, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 16px rgba(197, 168, 128, 0.25);
}
.alm-toast.toast-info .alm-toast-icon {
  background: var(--color-matte-bronze, #B38F5C);
  color: #FFFFFF;
  box-shadow: 0 0 8px rgba(197, 168, 128, 0.6);
}

/* Red Destructive Action Button */
.alm-btn-danger {
  background: #DC2626 !important;
  color: #FFFFFF !important;
  border: 1px solid #B91C1C !important;
  box-shadow: 0 4px 14px rgba(220, 38, 38, 0.35) !important;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.alm-btn-danger:hover {
  background: #B91C1C !important;
  color: #FFFFFF !important;
  box-shadow: 0 6px 18px rgba(220, 38, 38, 0.45) !important;
  transform: translateY(-1px);
}

.alm-btn-danger:active {
  transform: translateY(0) scale(0.97);
}

/* Custom Brand Confirmation & Warning Dialog Modal */
.alm-brand-dialog-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(4, 7, 13, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 100060 !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}

.alm-brand-dialog-backdrop.active {
  opacity: 1;
  visibility: visible;
}

.alm-brand-dialog {
  background: #0A0F1A;
  border: 1px solid rgba(197, 168, 128, 0.32);
  border-radius: 18px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.8), 0 0 35px rgba(197, 168, 128, 0.12);
  width: 100%;
  max-width: 440px;
  padding: 1.6rem 1.6rem 1.4rem;
  text-align: center;
  transform: scale(0.92) translateY(8px);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  box-sizing: border-box;
}

.alm-brand-dialog-backdrop.active .alm-brand-dialog {
  transform: scale(1) translateY(0);
}

.alm-brand-dialog-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.1rem;
}

.alm-brand-dialog-icon-danger {
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.32);
  color: #EF4444;
  box-shadow: 0 0 20px rgba(239, 68, 68, 0.2);
}

.alm-brand-dialog-icon-warning {
  background: rgba(245, 158, 11, 0.12);
  border: 1px solid rgba(245, 158, 11, 0.32);
  color: #F59E0B;
  box-shadow: 0 0 20px rgba(245, 158, 11, 0.2);
}

.alm-brand-dialog-icon-info {
  background: rgba(197, 168, 128, 0.12);
  border: 1px solid rgba(197, 168, 128, 0.32);
  color: #B38F5C;
  box-shadow: 0 0 20px rgba(197, 168, 128, 0.2);
}

.alm-brand-dialog-icon-success {
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.32);
  color: #10B981;
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.2);
}

.alm-brand-dialog-title {
  font-size: 1.15rem !important;
  font-weight: 850 !important;
  color: #FFFFFF !important;
  margin: 0 0 0.35rem 0 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.25 !important;
}

.alm-brand-dialog-message {
  font-size: 0.84rem !important;
  color: #94A3B8 !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.alm-brand-dialog-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.35rem;
}

.alm-brand-dialog-actions .alm-btn {
  flex: 1;
  min-height: 40px;
  padding: 0.5rem 1rem;
  font-size: 0.84rem;
  font-weight: 750;
  border-radius: var(--radius-pill);
  justify-content: center;
  white-space: nowrap;
}

.alm-brand-dialog-cancel-btn {
  color: #94A3B8 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

.alm-brand-dialog-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

@media (max-width: 480px) {
  .alm-brand-dialog {
    padding: 1.35rem 1.15rem;
    max-width: 95%;
  }
  .alm-brand-dialog-actions {
    flex-direction: column-reverse;
    gap: 0.45rem;
    width: 100%;
  }
  .alm-brand-dialog-actions .alm-btn {
    width: 100% !important;
    flex: none !important;
  }
}

/* 8. Risk Dial / Gauge */
.risk-meter {
  height: 10px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #10B981 0%, #F59E0B 50%, #EF4444 100%);
  position: relative;
  margin: 1.25rem 0 0.5rem;
}

.risk-needle {
  position: absolute;
  top: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #0F172A;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  transform: translateX(-50%);
  transition: left 0.25s ease;
}

/* ==========================================================================
   RECHNER / COMPRESSION CALCULATOR TELEMETRY STAGE
   ========================================================================== */
.rechner-stage-card {
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.rechner-stage-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}

.rechner-stage-subline {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--color-slate-400);
  letter-spacing: 0.02em;
}

.rechner-telemetry-viewport {
  position: relative;
  width: 100%;
  height: 310px;
  min-height: 310px;
  max-height: 310px;
  flex: 0 0 310px; /* Lock height so photo never resizes when dragging slider */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(197, 168, 128, 0.32);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.55), inset 0 0 20px rgba(0, 0, 0, 0.5);
  background: #05080E;
  margin: 1.15rem 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rechner-telemetry-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  filter: contrast(1.05) brightness(0.98);
  transition: transform 0.4s ease, filter 0.4s ease;
}

.rechner-telemetry-viewport:hover .rechner-telemetry-img {
  transform: scale(1.02);
  filter: contrast(1.1) brightness(1.02);
}

.rechner-telemetry-overlay {
  position: absolute;
  bottom: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  z-index: 2;
}

.rechner-telemetry-pill-left,
.rechner-telemetry-pill-right {
  background: rgba(8, 12, 20, 0.84);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(197, 168, 128, 0.35);
  color: #E2D2B6;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.22rem 0.55rem;
  border-radius: 4px;
  letter-spacing: 0.03em;
}

.rechner-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
}

.rechner-comp-card {
  padding: 0.85rem 1rem;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: border-color 0.2s ease;
}

.comp-critical {
  border-color: rgba(239, 68, 68, 0.32);
  background: rgba(239, 68, 68, 0.05);
}

.comp-critical .comp-card-badge {
  color: #F87171;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.comp-critical .comp-card-value {
  color: #EF4444;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

.comp-optimal {
  border-color: rgba(197, 168, 128, 0.35);
  background: rgba(197, 168, 128, 0.06);
}

.comp-optimal .comp-card-badge {
  color: #D4B890;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.comp-optimal .comp-card-value {
  color: #C5A880;
  font-family: var(--font-sans);
  font-size: 1.05rem;
  font-weight: 850;
  letter-spacing: -0.02em;
  margin-bottom: 0.25rem;
}

.comp-card-desc {
  font-size: 0.72rem;
  color: #94A3B8;
  line-height: 1.35;
}

/* Unified High-Tech Rechner Card */
.rechner-unified-card {
  max-width: 960px;
  margin: 0 auto;
  padding: 2.25rem;
  border-radius: var(--radius-xl);
  border: 1px solid rgba(197, 168, 128, 0.28);
  background: linear-gradient(180deg, #0B1120 0%, #060913 100%);
  position: relative;
}

.rechner-inputs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 1.5rem 0 1.25rem;
}

.rechner-input-group {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 10px;
  padding: 1.15rem 1.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.calc-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
}

.calc-label {
  font-size: 0.86rem;
  font-weight: 700;
  color: #F1F5F9;
  letter-spacing: -0.01em;
}

.calc-val-badge {
  font-family: var(--font-mono);
  font-size: 0.84rem;
  font-weight: 750;
  color: #C5A880;
  background: rgba(197, 168, 128, 0.12);
  padding: 0.22rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(197, 168, 128, 0.3);
}

.rechner-range-input {
  width: 100%;
  accent-color: var(--color-cyber-lime);
  cursor: pointer;
  height: 7px;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  outline: none;
  transition: all 0.2s ease;
}

.rechner-range-input:hover {
  background: rgba(255, 255, 255, 0.35);
}

.calc-scale-labels {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: #64748B;
  margin-top: 0.45rem;
}

.rechner-gauge-container {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 1.25rem 0;
}

.gauge-track {
  position: relative;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, #10B981 0%, #EAB308 50%, #EF4444 100%);
  margin: 0.75rem 0 0.25rem;
}

.gauge-needle {
  position: absolute;
  top: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 3px solid #0F172A;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  transform: translateX(-50%);
  transition: left 0.25s ease;
}

.rechner-stats-row {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 1.15rem 1.25rem;
  margin-bottom: 1.25rem;
}

@media (max-width: 1024px) {
  .flow-ribbon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .flow-ribbon-grid {
    grid-template-columns: 1fr;
  }
  .compare-display-grid {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   INTERACTIVE ANATOMICAL HUD, DIAGNOSTIC WIZARD & SPLIT-SLIDER SYSTEM
   ========================================================================== */

/* 1. Mouse-Tracking Ambient Spotlight */
.bento-card-dark {
  background-color: #0B1120;
  position: relative;
  overflow: hidden;
}

.bento-card-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle 320px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(197, 168, 128, 0.16), transparent 70%);
  pointer-events: none;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  z-index: 1;
}

/* 2. Anatomical HUD Cockpit */
.hud-cockpit-wrapper {
  background: #090E17;
  border: 1px solid rgba(197, 168, 128, 0.3);
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.hud-interactive-node {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.hud-interactive-node:hover,
.hud-interactive-node.active {
  transform: scale(1.15);
}

.hud-telemetry-panel {
  background: rgba(15, 23, 42, 0.95);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.hud-stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 1.25rem 0;
}

.hud-stat-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 0.75rem 1rem;
}

/* 3. 60-Second Pelvic Diagnostic Wizard */
.diagnostic-wizard-box {
  background: #ffffff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-bento);
  overflow: hidden;
}

.wizard-content-body {
  padding: 2.25rem;
}

/* Bedarfs-Konfigurator Result Box */
.wizard-result-box {
  background: rgba(16, 185, 129, 0.05);
  border: 2px solid var(--color-cyber-lime);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  position: relative;
  box-shadow: var(--shadow-hover);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}

.wizard-result-topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.wizard-result-proto-id {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--color-slate-500);
  font-weight: 700;
}

.wizard-result-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-slate-900);
  margin-bottom: 0.4rem;
  line-height: 1.25;
}

.wizard-result-lead {
  font-size: 0.84rem;
  color: var(--color-slate-700);
  line-height: 1.45;
  margin-bottom: 0.85rem;
}

.wizard-result-card {
  background: #ffffff;
  border: 1.5px solid rgba(197, 168, 128, 0.35);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: 290px 1fr;
  gap: 1.5rem;
  align-items: center;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
}

.wizard-result-media {
  width: 290px;
  height: 290px;
  min-width: 290px;
  border-radius: 12px;
  overflow: hidden;
  background: #0E1524;
  position: relative;
  border: 1.5px solid rgba(197, 168, 128, 0.35);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  grid-row: 1 / 3;
}

.wizard-result-media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform 0.3s ease;
}

.wizard-result-media:hover img {
  transform: scale(1.03);
}

.wizard-result-media .wizard-result-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.22rem 0.65rem;
  height: 25px;
  line-height: 1;
  background: rgba(197, 168, 128, 0.95);
  color: #080C14;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  white-space: nowrap !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.wizard-result-media .wizard-result-stock-tag {
  position: absolute;
  bottom: 12px;
  right: 12px;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #34D399;
  background: rgba(6, 78, 59, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 0.2rem 0.6rem;
  height: 24px;
  line-height: 1;
  border-radius: 5px;
  border: 1px solid rgba(52, 211, 153, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  white-space: nowrap !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.wizard-result-sku-badge {
  position: absolute;
  bottom: 12px;
  left: 12px;
  background: rgba(10, 14, 23, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: #C5A880;
  padding: 0.2rem 0.55rem;
  height: 24px;
  border-radius: 5px;
  font-weight: 800;
  border: 1px solid rgba(197, 168, 128, 0.35);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  white-space: nowrap !important;
  display: inline-flex;
  align-items: center;
  z-index: 2;
}

.wizard-result-details {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-sizing: border-box;
}

.wizard-result-prod-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--color-slate-900);
  margin-bottom: 0.2rem;
  line-height: 1.25;
}

.wizard-result-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.wizard-result-price {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-slate-900);
  white-space: nowrap !important;
}

.wizard-result-savings {
  font-size: 0.72rem;
  color: #047857;
  font-weight: 700;
  background: rgba(16, 185, 129, 0.12);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  white-space: nowrap !important;
}

.wizard-result-extra-row {
  background: rgba(197, 168, 128, 0.07);
  border: 1px solid rgba(197, 168, 128, 0.2);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  box-sizing: border-box;
}

.wizard-result-stat {
  font-size: 0.78rem;
  color: var(--color-slate-800);
  font-weight: 700;
  line-height: 1.3;
}

.wizard-result-chips {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.wizard-result-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.wizard-result-actions .wizard-btn-primary {
  width: 100%;
  font-size: 0.88rem;
  font-weight: 800;
  padding: 0.75rem 1rem;
  justify-content: center;
}

.wizard-result-subactions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  width: 100%;
}

.wizard-result-subactions .alm-btn {
  width: 100%;
  font-size: 0.78rem;
  padding: 0.6rem 0.75rem;
  justify-content: center;
  text-align: center;
}

.wizard-step-header {
  background: var(--color-slate-900);
  color: #ffffff;
  padding: 1.75rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

.wizard-question-title {
  font-size: 1.22rem;
  font-weight: 800;
  color: var(--color-slate-900);
  line-height: 1.35;
  margin-bottom: 1.35rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(197, 168, 128, 0.2);
  display: flex;
  align-items: center;
  position: relative;
}

.wizard-question-title::before {
  content: '';
  display: inline-block;
  width: 4px;
  height: 1.35rem;
  background: var(--color-cyber-lime);
  border-radius: 2px;
  margin-right: 0.85rem;
  flex-shrink: 0;
}

.wizard-option-card {
  border: 1.5px solid rgba(197, 168, 128, 0.28);
  border-radius: 14px;
  padding: 1.4rem 1.25rem;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  background: #ffffff;
  position: relative;
  user-select: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 156px;
  height: 100%;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
}

.wizard-option-card:hover {
  border-color: #C5A880;
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(197, 168, 128, 0.2);
  background: #FCFAF7;
}

.wizard-option-card.selected {
  border-color: #C5A880;
  border-width: 2px;
  background: linear-gradient(180deg, rgba(197, 168, 128, 0.12) 0%, rgba(197, 168, 128, 0.04) 100%);
  box-shadow: 0 0 0 1px #C5A880, 0 8px 24px rgba(197, 168, 128, 0.18);
}

.wizard-option-card.selected::after {
  content: '✓';
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #C5A880;
  color: #0E1524;
  font-weight: 850;
  font-size: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(197, 168, 128, 0.45);
}

.wizard-option-card .opt-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(197, 168, 128, 0.12);
  border: 1px solid rgba(197, 168, 128, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  margin-bottom: 0.85rem;
  transition: transform 0.2s ease, background 0.2s ease;
}

.wizard-option-card:hover .opt-icon,
.wizard-option-card.selected .opt-icon {
  background: rgba(197, 168, 128, 0.24);
  transform: scale(1.08);
}

.wizard-option-card .opt-title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-slate-900);
  line-height: 1.25;
  margin-bottom: 0.45rem;
}

.wizard-option-card .opt-desc {
  font-size: 0.84rem;
  color: var(--color-slate-600);
  line-height: 1.48;
}

/* 4. Draggable Before/After Comparison Slider */
.split-compare-container {
  position: relative;
  width: 100%;
  height: 380px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  border: 1px solid rgba(197, 168, 128, 0.25);
  background: #090E17;
  cursor: ew-resize;
}

.split-compare-before,
.split-compare-after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.split-compare-before {
  background: radial-gradient(circle at 85% 50%, #170F14 0%, #0A0E18 100%);
  z-index: 1;
}

.split-compare-after {
  background: radial-gradient(circle at 15% 50%, #063A25 0%, #031B12 100%);
  z-index: 2;
  width: 50%; /* driven by JS slider */
  border-right: 2px solid #C5A880;
  box-shadow: 6px 0 24px rgba(0, 0, 0, 0.4);
}

/* Stationary Full-Width Coordinate Layer */
.split-layer-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.split-content-side {
  width: 50%;
  min-width: 320px;
  height: 100%;
  padding: 2.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  z-index: 2;
  position: relative;
}

.split-content-right {
  margin-left: auto;
}

.split-content-left {
  margin-right: auto;
}

.split-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  width: 100%;
}

.split-badge-standard {
  background: rgba(239, 68, 68, 0.16);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #FCA5A5;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.split-badge-muffintop {
  background: rgba(197, 168, 128, 0.2);
  border: 1px solid rgba(197, 168, 128, 0.5);
  color: #E8DCBE;
  font-size: 0.68rem;
  font-weight: 700;
  font-family: var(--font-mono);
  padding: 0.22rem 0.55rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.split-label-short {
  display: none;
}
.split-label-full {
  display: inline;
}

.split-metric-tag {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 850;
  white-space: nowrap;
}

.split-metric-tag.crit {
  color: #EF4444;
}

.split-metric-tag.opt {
  color: #C5A880;
}

.split-metric-tag .metric-desc {
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.85;
}

.split-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

.split-text {
  font-size: 0.85rem;
  line-height: 1.55;
  margin: 0;
}

.split-content-right .split-text {
  color: #CBD5E1;
}

.split-content-left .split-text {
  color: #E2E8F0;
}

.split-checklist-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.4;
}

.split-checklist-row.crit {
  color: #F87171;
}

.split-checklist-row.opt {
  color: #C5A880;
}

.split-checklist-row .checklist-pill {
  white-space: nowrap;
}

/* Thematic Visual Sides (Pinned to opposite half, zero movement) */
.split-visual-side {
  width: 50%;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  z-index: 1;
  pointer-events: none;
}

.split-visual-standard {
  background: #0D080E;
}

.split-visual-muffintop {
  background: #031B12;
}

.split-visual-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  opacity: 0.65;
  transition: opacity 0.3s ease;
}

.split-visual-standard .split-visual-img {
  filter: contrast(1.15) brightness(0.85);
  mask-image: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 75%, transparent 100%);
}

.split-visual-muffintop .split-visual-img {
  filter: contrast(1.1) brightness(0.9);
  mask-image: linear-gradient(to left, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 75%, transparent 100%);
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.45) 75%, transparent 100%);
}

.split-visual-overlay {
  position: absolute;
  bottom: 2rem;
  z-index: 3;
  padding: 0.75rem 1.15rem;
  background: rgba(10, 14, 23, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

.split-visual-standard .split-visual-overlay {
  left: 2rem;
  border: 1px solid rgba(239, 68, 68, 0.4);
}

.split-visual-muffintop .split-visual-overlay {
  right: 2rem;
  border: 1px solid rgba(197, 168, 128, 0.45);
}

@media (max-width: 992px) {
  .split-compare-container {
    height: 420px;
  }
  .split-content-side {
    width: 60%;
    padding: 1.5rem 1.25rem;
  }
  .split-visual-side {
    width: 40%;
  }
  .split-visual-overlay {
    display: none;
  }
}

@media (max-width: 768px) {
  .split-visual-side {
    display: none;
  }
  .split-content-side {
    width: 100%;
  }
}

.split-compare-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 3px;
  background: #C5A880;
  box-shadow: 0 0 14px rgba(197, 168, 128, 0.85);
  z-index: 10;
  cursor: ew-resize;
  transform: translateX(-50%);
  pointer-events: none;
}

.split-compare-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #0E1524;
  border: 2px solid #C5A880;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5), 0 0 14px rgba(197, 168, 128, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #C5A880;
  font-size: 0.75rem;
  font-weight: 800;
  pointer-events: auto;
  cursor: grab;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.split-compare-knob:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.08);
}

/* 5. Product Quick-View Technical Spec Modal */
.alm-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(9, 13, 22, 0.75);
  backdrop-filter: blur(8px);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.alm-modal-backdrop.show {
  opacity: 1;
  pointer-events: auto;
}

.alm-modal-dialog {
  background: #ffffff;
  border: 1px solid rgba(197, 168, 128, 0.35);
  border-radius: var(--radius-xl);
  max-width: 1040px;
  width: 95%;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 25px 70px rgba(10, 15, 26, 0.45);
  transform: scale(0.96);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  scrollbar-width: thin;
}

.alm-modal-backdrop.show .alm-modal-dialog {
  transform: scale(1);
}

.alm-modal-top-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  z-index: 50;
  pointer-events: none;
}

.alm-modal-drag-indicator {
  display: none;
}

.alm-modal-close-btn {
  pointer-events: auto;
  position: static;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #F8FAFC;
  border: 1px solid rgba(197, 168, 128, 0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1E293B;
  transition: all 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.alm-modal-close-btn:hover {
  background: #0E1524;
  color: #C5A880;
  border-color: #C5A880;
  transform: rotate(90deg);
}

.alm-modal-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  min-height: 520px;
  max-height: 90vh;
  height: 100%;
  overflow: hidden;
}

@media (max-width: 860px) {
  .alm-modal-grid {
    grid-template-columns: 1fr;
    max-height: none;
    overflow-y: auto;
  }
}

.alm-modal-media-col {
  background: radial-gradient(circle at 50% 45%, rgba(197, 168, 128, 0.14) 0%, rgba(14, 21, 36, 0.04) 75%, transparent 100%), #FAF8F5;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  position: relative;
  border-right: 1px solid rgba(197, 168, 128, 0.22);
  min-height: 0;
  max-height: 90vh;
  overflow: hidden;
  box-sizing: border-box;
}

@media (max-width: 860px) {
  .alm-modal-media-col {
    border-right: none;
    border-bottom: 1px solid rgba(197, 168, 128, 0.22);
    padding: 1.25rem 1rem;
    max-height: none;
  }
}

.alm-modal-sku-beacon {
  position: absolute;
  top: 0.85rem;
  left: 0.85rem;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(14, 21, 36, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #C5A880;
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 750;
  border: 1px solid rgba(197, 168, 128, 0.4);
}

.alm-modal-img-stage {
  width: 100%;
  height: 100%;
  max-width: 520px;
  max-height: calc(90vh - 120px);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, #1e2638 0%, #0c121e 100%);
  box-shadow: 0 16px 40px -5px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(197, 168, 128, 0.35);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
  padding: 0;
  flex: 1 1 auto;
}

.alm-modal-img-stage img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
  border-radius: var(--radius-lg);
  transition: transform 0.35s ease;
}

.alm-modal-img-stage:hover img {
  transform: scale(1.03);
}

.alm-modal-trust-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  font-weight: 650;
  color: #475569;
  width: 100%;
  max-width: 520px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(197, 168, 128, 0.25);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  box-sizing: border-box;
  flex-shrink: 0;
}

.alm-modal-trust-strip span {
  white-space: nowrap;
}

.alm-modal-media-badges {
  display: none;
}

.alm-modal-content-col {
  padding: 1.25rem 1.6rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  max-height: 90vh;
  overflow-y: auto;
  gap: 0.45rem;
  scrollbar-width: thin;
  scrollbar-color: rgba(197, 168, 128, 0.35) transparent;
}

@media (max-width: 600px) {
  .alm-modal-content-col {
    padding: 1.15rem 1rem;
  }
}

.alm-modal-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.25rem;
  padding-right: 2.75rem; /* leaves clean space for close X */
}

.alm-modal-sku-text {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--color-slate-400);
}

.alm-modal-product-title {
  font-size: 1.25rem;
  font-weight: 850;
  color: var(--color-slate-900);
  line-height: 1.22;
  margin: 0 0 0.15rem 0;
}

.alm-modal-product-subtitle {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-cyber-dark, #065F46);
  margin-bottom: 0.35rem;
  line-height: 1.35;
}

.alm-modal-product-desc {
  font-size: 0.8rem;
  color: #475569;
  line-height: 1.45;
  margin-bottom: 0.4rem;
}

.alm-modal-specs-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.45rem;
}

.alm-modal-specs-list .alm-spec-chip {
  font-size: 0.7rem;
  padding: 0.18rem 0.45rem;
}

.alm-modal-config-box {
  background: #F8FAFC;
  border: 1px solid rgba(197, 168, 128, 0.25);
  border-radius: var(--radius-md);
  padding: 0.6rem 0.85rem;
  margin-bottom: 0.55rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.alm-modal-config-group {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.alm-modal-config-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 750;
  color: var(--color-slate-700);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.alm-modal-selected-val {
  font-family: var(--font-mono);
  color: #C5A880;
  font-weight: 700;
}

.alm-modal-chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.alm-modal-chip {
  padding: 0.22rem 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  background: #ffffff;
  border: 1px solid rgba(197, 168, 128, 0.3);
  color: var(--color-slate-700);
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.alm-modal-chip:hover {
  border-color: #C5A880;
  color: #0E1524;
  background: rgba(197, 168, 128, 0.08);
}

.alm-modal-chip.active {
  background: #0E1524;
  color: #C5A880;
  border-color: #C5A880;
  box-shadow: 0 2px 6px rgba(10, 14, 23, 0.2);
}

.color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: inline-block;
}

.alm-modal-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.4rem;
}

.alm-modal-tier-card {
  background: #ffffff;
  border: 1px solid rgba(197, 168, 128, 0.3);
  border-radius: var(--radius-sm);
  padding: 0.4rem 0.3rem;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 48px;
}

.alm-modal-tier-card:hover {
  border-color: #C5A880;
  transform: translateY(-1px);
}

.alm-modal-tier-card.active {
  background: #0E1524;
  color: #ffffff;
  border-color: #C5A880;
  box-shadow: 0 3px 10px rgba(10, 14, 23, 0.25);
}

.alm-modal-tier-card.active .tier-card-head {
  color: #E2D1B3;
}

.alm-modal-tier-card.active .tier-card-price {
  color: #C5A880;
}

.alm-modal-tier-card.active .tier-card-note {
  color: #94A3B8;
}

.tier-card-head {
  font-size: 0.68rem;
  font-weight: 750;
  color: var(--color-slate-700);
  margin-bottom: 0.1rem;
}

.tier-card-price {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 850;
  color: var(--color-slate-900);
}

.tier-card-price small {
  font-size: 0.65rem;
  font-weight: normal;
  opacity: 0.8;
}

.tier-card-note {
  font-size: 0.62rem;
  color: var(--color-slate-500);
  margin-top: 0.1rem;
}

.tier-badge-corner {
  position: absolute;
  top: 0;
  right: 0;
  background: #C5A880;
  color: #0E1524;
  font-size: 0.58rem;
  font-weight: 800;
  padding: 0.08rem 0.35rem;
  border-bottom-left-radius: 5px;
}

.alm-badge-savings-pill {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  border: 1px solid rgba(16, 185, 129, 0.3);
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-pill);
  font-size: 0.66rem;
  font-weight: 800;
}

.alm-modal-checkout-section {
  padding-top: 0.55rem;
  border-top: 1px solid var(--border-light);
  margin-top: auto;
}

.alm-modal-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.55rem;
}

.alm-modal-price-stack {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.alm-modal-price-current {
  font-family: var(--font-mono);
  font-size: 1.45rem;
  font-weight: 850;
  color: var(--color-slate-900);
}

.alm-modal-price-strike {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--color-slate-400);
  text-decoration: line-through;
}

.alm-modal-save-pill {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
  font-size: 0.72rem;
  font-weight: 750;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-pill);
}

.alm-modal-tax-note {
  font-size: 0.7rem;
  color: var(--color-slate-500);
  margin-top: 0.15rem;
}

.alm-modal-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid rgba(197, 168, 128, 0.35);
  border-radius: var(--radius-pill);
  background: #ffffff;
  overflow: hidden;
}

.alm-modal-step-btn {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-slate-700);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.alm-modal-step-btn:hover {
  background: rgba(197, 168, 128, 0.15);
  color: #0E1524;
}

.alm-modal-step-val {
  width: 28px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 800;
  color: #0E1524;
}

.alm-modal-actions-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.alm-modal-actions-row .alm-btn {
  padding: 0.65rem 1rem;
}

#modalAddToCartActionBtn {
  flex: 1.5;
  justify-content: center;
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
}

#modalViewDetailLink {
  flex: 1;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .hud-cockpit-wrapper .bento-grid {
    grid-template-columns: 1fr;
  }
  .hud-telemetry-panel {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* ==========================================================================
   MOBILE DRAWER & RESPONSIVE HEADER
   ========================================================================== */
.alm-mobile-drawer {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 999999 !important;
  display: none;
}

.alm-mobile-drawer.active {
  display: flex !important;
  flex-direction: column !important;
}

body.alm-mobile-menu-open .alm-header,
body.alm-mobile-menu-open .alm-top-ticker {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.alm-mobile-drawer-backdrop {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(10, 15, 26, 0.8) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  animation: fadeIn 0.22s ease-out;
}

.alm-mobile-drawer-content {
  position: relative !important;
  width: 100vw !important;
  max-width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  background: #ffffff !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 1000000 !important;
  animation: drawerFadeSlide 0.26s cubic-bezier(0.16, 1, 0.3, 1) !important;
  overflow: hidden !important;
}

@keyframes drawerFadeSlide {
  from {
    opacity: 0;
    transform: translateY(-12px) scale(0.99);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.alm-mobile-drawer-header {
  padding: 0.9rem 1.25rem !important;
  border-bottom: 1px solid var(--border-light) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #FAF9F6 !important;
  flex-shrink: 0 !important;
}

.alm-mobile-close-btn {
  background: #ffffff !important;
  border: 1px solid var(--border-light) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: var(--radius-pill) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--color-slate-800) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
}

.alm-mobile-close-btn:hover,
.alm-mobile-close-btn:active {
  background-color: var(--color-slate-100) !important;
  color: var(--color-slate-950) !important;
  border-color: var(--color-bronze-primary) !important;
  transform: scale(1.05);
}

.alm-mobile-drawer-body {
  padding: 1.25rem 1.25rem 2rem !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.alm-mobile-menu-section-title {
  font-size: 0.68rem !important;
  font-weight: 850 !important;
  font-family: var(--font-mono) !important;
  letter-spacing: 0.08em !important;
  color: var(--color-bronze-primary) !important;
  margin: 1.25rem 0 0.5rem !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
}

.alm-mobile-menu-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(197, 168, 128, 0.2);
}

.alm-mobile-nav-link {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.75rem 0.65rem !important;
  border-radius: 8px !important;
  color: var(--color-slate-800) !important;
  font-weight: 600 !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s ease !important;
  min-height: 48px !important;
  box-sizing: border-box !important;
}

.alm-mobile-nav-link:hover,
.alm-mobile-nav-link:active,
.alm-mobile-nav-link.active {
  background-color: var(--color-slate-50) !important;
  color: var(--color-bronze-primary) !important;
  padding-left: 0.85rem !important;
}

.alm-mobile-nav-link .nav-chevron {
  color: var(--color-slate-400);
  font-size: 0.85rem;
  transition: transform 0.2s ease;
}

.alm-mobile-drawer .alm-badge-count,
.alm-mobile-nav-link .alm-badge-count {
  position: static !important;
  top: auto !important;
  right: auto !important;
  margin-left: auto !important;
  display: inline-flex !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 0 6px !important;
  font-size: 0.72rem !important;
  font-weight: 850 !important;
  border-radius: var(--radius-pill) !important;
  background-color: var(--color-matte-bronze, #C5A880) !important;
  color: #0E1524 !important;
  border: 1px solid rgba(197, 168, 128, 0.4) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  line-height: 1 !important;
}

.alm-mobile-nav-link:hover .nav-chevron {
  color: var(--color-bronze-primary);
  transform: translateX(3px);
}

.drawer-tag-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.65rem;
  background: var(--color-slate-100);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-pill);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--color-slate-700);
  white-space: nowrap;
  transition: all 0.2s ease;
}

.drawer-tag-pill:hover,
.drawer-tag-pill:active {
  background: rgba(197, 168, 128, 0.15);
  border-color: var(--color-bronze-primary);
  color: var(--color-bronze-primary);
}

/* ==========================================================================
   MOBILE DRAWER ACCORDIONS & COLLAPSIBLE PRODUCT GROUPS
   ========================================================================== */
.alm-drawer-section-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
  margin-top: 0.5rem;
  border-bottom: 1px solid rgba(197, 168, 128, 0.2);
}

.alm-drawer-section-link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 1;
  min-width: 0;
  padding: 0.85rem 0.25rem 0.5rem;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
}

.alm-drawer-section-link:hover,
.alm-drawer-section-link:active {
  opacity: 0.82;
}

.alm-drawer-section-toggle {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  background: transparent;
  border: none;
  padding: 0.85rem 0.25rem 0.5rem;
  margin-top: 0.5rem;
  cursor: pointer;
  text-align: left;
  user-select: none;
  font-family: inherit;
  border-bottom: 1px solid rgba(197, 168, 128, 0.2);
}

.alm-drawer-section-header .section-title-text,
.alm-drawer-section-toggle .section-title-text {
  font-size: 0.7rem;
  font-weight: 850;
  font-family: var(--font-mono);
  letter-spacing: 0.08em;
  color: var(--color-bronze-primary, #8C6738);
  text-transform: uppercase;
}

.alm-drawer-section-header .section-badge-count,
.alm-drawer-section-toggle .section-badge-count {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 750;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-pill);
  background: rgba(197, 168, 128, 0.16);
  color: #8C6738;
  margin-left: auto;
  margin-right: 0.35rem;
}

.alm-drawer-section-toggle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: var(--radius-sm, 6px);
  color: var(--color-slate-400);
  transition: background-color 0.2s ease, color 0.2s ease;
  touch-action: manipulation;
}

.alm-drawer-section-toggle-btn:hover,
.alm-drawer-section-toggle-btn:active {
  background: rgba(197, 168, 128, 0.12);
  color: var(--color-bronze-primary, #8C6738);
}

.alm-drawer-section-toggle .section-toggle-chevron,
.alm-drawer-section-toggle-btn .section-toggle-chevron {
  color: var(--color-slate-400);
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.alm-drawer-section-toggle.active .section-toggle-chevron,
.alm-drawer-section-toggle[aria-expanded="true"] .section-toggle-chevron,
.alm-drawer-section-toggle-btn.active .section-toggle-chevron,
.alm-drawer-section-toggle-btn[aria-expanded="true"] .section-toggle-chevron {
  transform: rotate(180deg);
  color: var(--color-bronze-primary, #8C6738);
}

.alm-drawer-section-content {
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  opacity: 1;
}

.alm-drawer-section-content.collapsed {
  max-height: 0 !important;
  opacity: 0;
  pointer-events: none;
  display: none !important;
}

/* Category Group Accordion Item */
.alm-drawer-group-accordion {
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
  margin-bottom: 0.2rem;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.alm-drawer-group-accordion.expanded {
  background: rgba(197, 168, 128, 0.04);
}

.alm-drawer-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 48px;
  box-sizing: border-box;
}

.alm-drawer-group-link {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.5rem;
  text-decoration: none;
  color: var(--color-slate-800);
  font-weight: 650;
  font-size: 0.9rem;
  border-radius: 8px;
  transition: color 0.2s ease, transform 0.15s ease;
}

.alm-drawer-group-link:hover,
.alm-drawer-group-link:active {
  color: var(--color-bronze-primary, #8C6738);
}

.alm-drawer-group-link .group-icon {
  font-size: 1.15rem;
  line-height: 1;
  flex-shrink: 0;
}

.alm-drawer-group-link .group-label {
  flex: 1;
  line-height: 1.25;
}

.alm-drawer-group-link .group-count {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 750;
  padding: 0.12rem 0.4rem;
  border-radius: var(--radius-pill);
  background: rgba(14, 21, 36, 0.08);
  color: var(--color-slate-600);
  margin-left: 0.35rem;
  flex-shrink: 0;
}

.alm-drawer-group-link .group-count.badge-sale {
  background: rgba(239, 68, 68, 0.15);
  color: #DC2626;
  font-weight: 800;
}

.alm-drawer-group-toggle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-slate-400);
  border-radius: var(--radius-sm);
  transition: all 0.2s ease;
  flex-shrink: 0;
  padding: 0;
}

.alm-drawer-group-toggle:hover,
.alm-drawer-group-toggle:active {
  color: var(--color-bronze-primary, #8C6738);
  background: rgba(197, 168, 128, 0.12);
}

.alm-drawer-group-toggle svg {
  transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.alm-drawer-group-accordion.expanded .alm-drawer-group-toggle svg,
.alm-drawer-group-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
  color: var(--color-bronze-primary, #8C6738);
}

/* Sub-items list (individual SKUs) */
.alm-drawer-group-subitems {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, padding 0.25s ease;
  padding: 0 0.5rem 0 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.alm-drawer-group-accordion.expanded .alm-drawer-group-subitems {
  max-height: 600px;
  opacity: 1;
  padding: 0.3rem 0.5rem 0.65rem 1.6rem;
}

.drawer-sub-sku-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.45rem;
  padding: 0.45rem 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-slate-700);
  font-size: 0.82rem;
  line-height: 1.25;
  transition: all 0.15s ease;
  background: transparent;
}

.drawer-sub-sku-link:hover,
.drawer-sub-sku-link:active {
  background: #FFFFFF;
  color: var(--color-bronze-primary, #8C6738);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.05);
  transform: translateX(2px);
}

.drawer-sub-sku-link .sub-sku-badge {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 750;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  background: rgba(14, 21, 36, 0.06);
  color: var(--color-slate-600);
  flex-shrink: 0;
}

.drawer-sub-sku-link .sub-sku-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 550;
}

.drawer-sub-sku-link .sub-sku-price {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 800;
  color: var(--color-slate-900);
  flex-shrink: 0;
}

.drawer-sub-all-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.45rem 0.5rem;
  margin-top: 0.2rem;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.76rem;
  font-weight: 750;
  color: #8C6738;
  background: rgba(197, 168, 128, 0.08);
  border: 1px dashed rgba(197, 168, 128, 0.35);
  transition: all 0.2s ease;
}

.drawer-sub-all-link:hover,
.drawer-sub-all-link:active {
  background: rgba(197, 168, 128, 0.18);
  color: #5C4120;
}

.alm-mobile-drawer-footer {
  padding: 1rem 1.25rem 1.25rem !important;
  border-top: 1px solid var(--border-light) !important;
  background-color: #FAF9F6 !important;
  flex-shrink: 0 !important;
  width: 100% !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.alm-mobile-toggle {
  display: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-light);
  background: #ffffff;
  align-items: center;
  justify-content: center;
  color: var(--color-slate-800);
  cursor: pointer;
  transition: var(--transition);
}

@media (max-width: 1024px) {
  .alm-mobile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

.alm-mobile-toggle:hover {
  background-color: var(--color-slate-100);
  color: var(--color-slate-900);
}

/* ==========================================================================
   HOMEPAGE DUAL AUTO-SLIDERS (VITRINE)
   ========================================================================== */
.alm-carousel-wrapper {
  position: relative;
  margin-bottom: 3.5rem;
}

.alm-carousel-wrapper {
  position: relative;
}

.alm-carousel-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 1.35rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.alm-carousel-controls {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

@media (min-width: 769px) {
  .alm-carousel-controls {
    position: absolute;
    top: 0.35rem;
    right: 0;
    z-index: 10;
  }
  .carousel-swipe-hint {
    display: none;
  }
}

.alm-carousel-arrow {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid rgba(197, 168, 128, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-slate-800);
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
}

.alm-carousel-arrow:hover {
  background: var(--color-slate-900);
  color: #ffffff;
  border-color: var(--color-slate-900);
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(197, 168, 128, 0.35);
}

.alm-carousel-arrow svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 2.2;
}

.alm-carousel-arrow:hover svg {
  stroke: #ffffff;
}

.alm-carousel-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.5rem 0.25rem 1.5rem;
}

.alm-carousel-track::-webkit-scrollbar {
  display: none;
}

.alm-carousel-track .alm-product-card {
  flex: 0 0 calc(33.333% - 1rem);
  min-width: 310px;
  max-width: 360px;
  scroll-snap-align: start;
}

@media (max-width: 1080px) {
  .alm-carousel-track .alm-product-card {
    flex: 0 0 calc(50% - 0.75rem);
    min-width: 280px;
  }
}

@media (max-width: 640px) {
  .alm-carousel-track .alm-product-card {
    flex: 0 0 86%;
    min-width: 260px;
  }
}

/* Bundle Card Media Showcase & Compact Grid Styles */
.bundles-grid-narrow {
  max-width: 1240px;
  margin: 0 auto;
  gap: 1.25rem;
}

.bundle-card-media {
  height: 240px;
  width: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  margin-bottom: 0.9rem;
  background: radial-gradient(circle at 50% 50%, #172033 0%, #0a0f1a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 1px solid rgba(197, 168, 128, 0.22);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.bundle-card-media img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
  border-radius: 6px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card:hover .bundle-card-media img {
  transform: scale(1.035);
}

@media (max-width: 991px) {
  .bundles-grid-narrow {
    max-width: 540px;
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

@media (max-width: 768px) {
  .bundle-card-media {
    height: 200px;
  }
}

/* ==========================================================================
   CATALOG PAGINATION CONTROLS
   ========================================================================== */
.alm-pagination-wrapper {
  margin-top: 3rem;
  padding: 1.5rem 0 0.5rem;
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
}

.alm-pagination-info {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--color-slate-500);
  letter-spacing: 0.02em;
  text-align: center;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 0.25rem 0.5rem !important;
}

.alm-pagination-info strong {
  color: var(--color-slate-800);
}

.pagination-count-wrap,
.pagination-page-wrap {
  white-space: nowrap !important;
  display: inline-block !important;
}

.pagination-dot-sep {
  color: var(--color-slate-400) !important;
}

.alm-pagination-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
}

.alm-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 0.85rem;
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  background: #ffffff;
  color: var(--color-slate-700);
  border: 1px solid var(--border-light);
  cursor: pointer;
  transition: var(--transition);
  user-select: none;
}

.alm-page-btn:hover:not(:disabled):not(.active) {
  border-color: var(--color-bronze-primary);
  color: var(--color-slate-950);
  background: var(--color-slate-50);
  transform: translateY(-1px);
}

.alm-page-btn.active {
  background: var(--color-cyber-lime);
  color: #080C14;
  border-color: #DFCEB0;
  box-shadow: 0 4px 14px rgba(197, 168, 128, 0.35);
  font-weight: 850;
  cursor: default;
}

.alm-page-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
  background: var(--color-slate-100);
  border-color: var(--border-light);
}

.alm-page-btn-arrow {
  padding: 0 1.15rem;
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 750;
  gap: 0.4rem;
}

@media (max-width: 768px) {
  .alm-pagination-wrapper {
    margin-top: 1.5rem !important;
    padding: 1.25rem 0 0.5rem !important;
    gap: 0.85rem !important;
  }
  .alm-pagination-info {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    gap: 0.2rem 0.4rem !important;
    padding: 0 0.5rem !important;
    letter-spacing: 0.01em !important;
  }
  .pagination-count-wrap,
  .pagination-page-wrap {
    white-space: nowrap !important;
    display: inline-block !important;
    word-break: keep-all !important;
  }
  .alm-pagination-nav {
    gap: 0.35rem !important;
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
  .alm-page-btn {
    min-width: 36px !important;
    height: 36px !important;
    padding: 0 0.55rem !important;
    font-size: 0.78rem !important;
    border-radius: 8px !important;
  }
  .alm-page-btn-arrow {
    padding: 0 0.75rem !important;
    font-size: 0.74rem !important;
  }
}



/* ==========================================================================
   PRO-GRADE MOBILE PHONE & TABLET UI/UX ADAPTATION SYSTEM (MAX-WIDTH: 768px / 640px / 480px)
   ========================================================================== */

/* 1. Global Touch Target & Layout Resets on Mobile */
@media (max-width: 768px) {
  :root {
    --header-height: 102px;
  }

  html, body, .alm-body {
    overflow-x: clip !important;
    max-width: 100vw !important;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none !important;
    outline: none !important;
  }

  .alm-btn,
  .alm-btn-block {
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
  }

  /* Fluid Mobile Headings */
  h1, .alm-hero-title {
    font-size: clamp(1.5rem, 6.5vw, 2rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
  }

  h2 {
    font-size: clamp(1.25rem, 5vw, 1.55rem) !important;
    line-height: 1.25 !important;
  }

  h3 {
    font-size: clamp(1.05rem, 4.2vw, 1.25rem) !important;
    line-height: 1.3 !important;
  }

  /* Spacing & Card Padding Overrides */
  .alm-section {
    padding: 2.25rem 0 !important;
    box-shadow: none !important;
  }

  .alm-container {
    padding: 0 1rem !important;
    box-shadow: none !important;
  }

  /* Override hardcoded desktop padding on bento cards and completely remove shadows */
  .bento-card,
  .bento-card-dark,
  .rechner-unified-card,
  .diagnostic-wizard-box,
  .split-compare-container,
  .alm-product-card {
    padding: 1.25rem 1rem !important;
    border-radius: var(--radius-md) !important;
    box-shadow: none !important;
  }

  .hud-cockpit-wrapper {
    padding: 0 !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(197, 168, 128, 0.28) !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .bento-card:hover,
  .bento-card-dark:hover,
  .rechner-unified-card:hover,
  .hud-cockpit-wrapper:hover,
  .alm-product-card:hover {
    box-shadow: none !important;
  }

  /* Bento Columns to 100% */
  .col-12, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3 {
    grid-column: span 12 !important;
  }

  .bento-grid {
    grid-template-columns: 1fr !important;
    gap: 0.95rem !important;
  }

  /* Touch Target Standard (44px min for interactive controls) */
  .alm-btn {
    min-height: 44px;
    touch-action: manipulation;
  }
}

/* 2. Header & Topbar Mobile Experience */
@media (max-width: 768px) {
  .alm-header {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    border-bottom: 1px solid rgba(197, 168, 128, 0.22) !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
    transition: box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease !important;
  }

  .alm-header.header-scrolled {
    box-shadow: 0 4px 18px rgba(10, 15, 26, 0.1) !important;
    border-bottom-color: rgba(197, 168, 128, 0.35) !important;
    background: rgba(255, 255, 255, 0.99) !important;
  }

  .alm-header-primary {
    height: 56px !important;
  }

  .alm-header-primary-inner {
    padding: 0 0.65rem !important;
    gap: 0.35rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-logo-wrapper {
    gap: 0.4rem !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
  }

  .alm-logo-mark {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    flex-shrink: 0 !important;
  }

  .alm-logo-mark svg {
    width: 18px !important;
    height: 18px !important;
  }

  .alm-logo-text {
    font-size: 1.15rem !important;
    white-space: nowrap !important;
  }

  .alm-logo-tagline {
    display: none !important;
  }

  .alm-header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-shrink: 0 !important;
  }

  .alm-icon-btn,
  .alm-mobile-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex-shrink: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: #ffffff !important;
    border: 1px solid rgba(15, 23, 42, 0.12) !important;
    color: var(--color-slate-900) !important;
    cursor: pointer !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    -webkit-tap-highlight-color: transparent !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
  }

  .alm-mobile-toggle:hover,
  .alm-mobile-toggle:active {
    background-color: var(--color-slate-100) !important;
    border-color: var(--color-bronze-primary) !important;
    color: var(--color-bronze-primary) !important;
  }

  /* Mobile Cart Trigger: Clean Compact Circular Bag Icon matching Icon Buttons */
  .alm-cart-trigger {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    border-radius: var(--radius-pill) !important;
    background: #ffffff !important;
    color: var(--color-slate-800) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease !important;
  }

  .alm-cart-trigger:hover,
  .alm-cart-trigger:active {
    background-color: var(--color-slate-100) !important;
    border-color: var(--color-bronze-primary) !important;
    color: var(--color-bronze-primary) !important;
  }

  .alm-cart-trigger span:not(.alm-badge-count) {
    display: none !important;
  }

  /* Mobile Drawer Search Box */
  .alm-mobile-search-box {
    display: flex !important;
    width: 100% !important;
    position: relative !important;
  }

  .alm-mobile-search-box .alm-search-input {
    width: 100% !important;
    padding: 0.72rem 0.85rem 0.72rem 2.4rem !important;
    font-size: 16px !important; /* Prevents iOS Safari auto-zoom */
    border-radius: var(--radius-pill) !important;
    border: 1.5px solid rgba(197, 168, 128, 0.45) !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
  }

  .alm-mobile-search-box .alm-search-icon {
    position: absolute !important;
    left: 0.85rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94A3B8 !important;
    pointer-events: none !important;
  }

  .alm-mobile-search-box .alm-search-dropdown {
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    top: calc(100% + 6px) !important;
    max-height: min(340px, 55vh) !important;
    z-index: 9999 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 480px) {
  .alm-logo-tagline {
    display: none !important;
  }

  .alm-cart-trigger span:not(.alm-badge-count) {
    display: none !important;
  }

  .alm-cart-trigger {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    padding: 0 !important;
    justify-content: center !important;
  }

  .alm-icon-btn,
  .alm-mobile-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
  }

  .alm-top-ticker {
    padding: 0.25rem 0.5rem !important;
  }

  .alm-top-ticker-inner {
    font-size: 0.68rem !important;
  }

  .ticker-promo-text {
    font-size: 0.64rem !important;
  }
}

/* 3. Catalog & Product Cards on Mobile (2-Column Adaptive Ergonomics) */
@media (max-width: 768px) {
  #catalogGrid,
  #mainProductGrid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }

  #catalogGrid .alm-product-card,
  #mainProductGrid .alm-product-card {
    grid-column: span 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(197, 168, 128, 0.22) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  #catalogGrid .alm-product-card .alm-product-media,
  #mainProductGrid .alm-product-card .alm-product-media,
  .alm-carousel-track .alm-product-card .alm-product-media,
  .alm-product-card .alm-product-media {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    position: relative !important;
    background: #0E1524 !important;
    overflow: hidden !important;
    border-bottom: 1px solid rgba(197, 168, 128, 0.18) !important;
    border-radius: 9px 9px 0 0 !important;
  }

  #catalogGrid .alm-product-card .alm-product-media-link,
  #mainProductGrid .alm-product-card .alm-product-media-link,
  .alm-carousel-track .alm-product-card .alm-product-media-link,
  .alm-product-card .alm-product-media-link {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #catalogGrid .alm-product-card .alm-product-media-link img,
  #catalogGrid .alm-product-card .alm-product-media-link svg,
  #mainProductGrid .alm-product-card .alm-product-media-link img,
  #mainProductGrid .alm-product-card .alm-product-media-link svg,
  .alm-carousel-track .alm-product-card .alm-product-media-link img,
  .alm-carousel-track .alm-product-card .alm-product-media-link svg,
  .alm-product-card .alm-product-media-link img,
  .alm-product-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  #catalogGrid .alm-product-card .alm-product-media-tag,
  #mainProductGrid .alm-product-card .alm-product-media-tag {
    top: 0.35rem !important;
    left: 0.35rem !important;
    padding: 0.12rem 0.35rem !important;
    font-size: 0.55rem !important;
    white-space: nowrap !important;
    border-radius: 4px !important;
    letter-spacing: 0.02em !important;
    background: rgba(10, 14, 23, 0.85) !important;
    z-index: 5 !important;
  }

  #catalogGrid .alm-product-card .alm-product-wishlist-btn,
  #mainProductGrid .alm-product-card .alm-product-wishlist-btn {
    top: 0.35rem !important;
    right: 0.35rem !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    background: rgba(255, 255, 255, 0.92) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(197, 168, 128, 0.3) !important;
  }

  #catalogGrid .alm-product-card .alm-product-wishlist-btn svg,
  #mainProductGrid .alm-product-card .alm-product-wishlist-btn svg {
    width: 13px !important;
    height: 13px !important;
  }

  #catalogGrid .alm-product-card .alm-product-hover-actions,
  #mainProductGrid .alm-product-card .alm-product-hover-actions {
    display: none !important;
  }

  #catalogGrid .alm-product-card .alm-product-body,
  #mainProductGrid .alm-product-card .alm-product-body {
    padding: 0.38rem 0.35rem 0.4rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 0.12rem !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
  }

  #catalogGrid .alm-product-card .alm-product-header-row,
  #mainProductGrid .alm-product-card .alm-product-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.2rem !important;
    margin-bottom: 0.1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #catalogGrid .alm-product-card .alm-product-header-row .alm-badge,
  #mainProductGrid .alm-product-card .alm-product-header-row .alm-badge {
    font-size: 0.52rem !important;
    font-weight: 750 !important;
    padding: 0.08rem 0.3rem !important;
    border-radius: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 65% !important;
    line-height: 1.15 !important;
  }

  #catalogGrid .alm-product-card .alm-product-rating,
  #mainProductGrid .alm-product-card .alm-product-rating {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.12rem !important;
    color: var(--color-slate-700) !important;
  }

  #catalogGrid .alm-product-card .alm-product-rating .rating-count,
  #mainProductGrid .alm-product-card .alm-product-rating .rating-count {
    display: none !important;
  }

  #catalogGrid .alm-product-card .alm-product-title,
  #mainProductGrid .alm-product-card .alm-product-title {
    font-size: 0.72rem !important;
    font-weight: 750 !important;
    line-height: 1.22 !important;
    min-height: 2.44em !important;
    max-height: 2.44em !important;
    margin: 0 0 0.12rem 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #catalogGrid .alm-product-card .alm-product-title a,
  #mainProductGrid .alm-product-card .alm-product-title a {
    color: var(--color-slate-900) !important;
    text-decoration: none !important;
  }

  #catalogGrid .alm-product-card .alm-product-desc,
  #catalogGrid .alm-product-card .alm-product-delivery-pill,
  #mainProductGrid .alm-product-card .alm-product-desc,
  #mainProductGrid .alm-product-card .alm-product-delivery-pill {
    display: none !important;
  }

  #catalogGrid .alm-product-card .alm-product-specs,
  #mainProductGrid .alm-product-card .alm-product-specs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow: hidden !important;
    margin: 0 0 0.15rem !important;
    gap: 0.2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #catalogGrid .alm-product-card .alm-spec-chip:nth-child(n+2),
  #mainProductGrid .alm-product-card .alm-spec-chip:nth-child(n+2) {
    display: none !important;
  }

  #catalogGrid .alm-product-card .alm-spec-chip:first-child,
  #mainProductGrid .alm-product-card .alm-spec-chip:first-child,
  .alm-carousel-track .alm-product-card .alm-spec-chip:first-child,
  .alm-product-card .alm-spec-chip:first-child {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.22rem !important;
    font-family: var(--font-sans) !important;
    font-size: 0.58rem !important;
    font-weight: 600 !important;
    padding: 0.08rem 0.32rem !important;
    background: rgba(197, 168, 128, 0.08) !important;
    border: 1px solid rgba(197, 168, 128, 0.24) !important;
    border-radius: 4px !important;
    color: var(--color-slate-700) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #catalogGrid .alm-product-card .alm-spec-chip:first-child .alm-spec-text,
  #mainProductGrid .alm-product-card .alm-spec-chip:first-child .alm-spec-text,
  .alm-carousel-track .alm-product-card .alm-spec-chip:first-child .alm-spec-text,
  .alm-product-card .alm-spec-chip:first-child .alm-spec-text {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: inline-block !important;
  }

  #catalogGrid .alm-product-card .alm-spec-chip:first-child svg,
  #mainProductGrid .alm-product-card .alm-spec-chip:first-child svg,
  .alm-carousel-track .alm-product-card .alm-spec-chip:first-child svg,
  .alm-product-card .alm-spec-chip:first-child svg {
    flex-shrink: 0 !important;
    width: 8px !important;
    height: 8px !important;
  }

  #catalogGrid .alm-product-card .alm-product-footer,
  #mainProductGrid .alm-product-card .alm-product-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.22rem !important;
    padding-top: 0.22rem !important;
    margin-top: auto !important;
    border-top: 1px solid rgba(197, 168, 128, 0.15) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #catalogGrid .alm-product-card .alm-product-footer-meta,
  #mainProductGrid .alm-product-card .alm-product-footer-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #catalogGrid .alm-product-card .alm-product-price-stack,
  #mainProductGrid .alm-product-card .alm-product-price-stack {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  #catalogGrid .alm-product-card .alm-product-price,
  #mainProductGrid .alm-product-card .alm-product-price {
    font-size: 0.95rem !important;
    font-weight: 850 !important;
    color: var(--color-slate-900) !important;
    line-height: 1 !important;
    font-family: var(--font-mono) !important;
    white-space: nowrap !important;
  }

  #catalogGrid .alm-product-card .alm-product-tax-note,
  #mainProductGrid .alm-product-card .alm-product-tax-note {
    font-size: 0.54rem !important;
    color: var(--color-slate-400) !important;
    white-space: nowrap !important;
    margin-top: 0 !important;
  }

  #catalogGrid .alm-product-card .alm-product-footer-actions,
  #mainProductGrid .alm-product-card .alm-product-footer-actions {
    display: flex !important;
    gap: 0.22rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #catalogGrid .alm-product-card .alm-btn-inspect-spec,
  #mainProductGrid .alm-product-card .alm-btn-inspect-spec {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    border: 1px solid rgba(197, 168, 128, 0.3) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    color: var(--color-slate-700) !important;
  }

  #catalogGrid .alm-product-card .alm-btn-inspect-spec span,
  #mainProductGrid .alm-product-card .alm-btn-inspect-spec span {
    display: none !important;
  }

  #catalogGrid .alm-product-card .alm-btn-inspect-spec svg,
  #mainProductGrid .alm-product-card .alm-btn-inspect-spec svg {
    width: 13px !important;
    height: 13px !important;
  }

  #catalogGrid .alm-product-card .alm-btn-cart-expand,
  #mainProductGrid .alm-product-card .alm-btn-cart-expand {
    flex: 1 !important;
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 0.45rem !important;
    font-size: 0.72rem !important;
    font-weight: 750 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    background: var(--color-cyber-dark) !important;
    color: #FFFFFF !important;
    border: none !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(10, 15, 26, 0.15) !important;
  }

  #catalogGrid .alm-product-card .alm-btn-cart-expand .cart-btn-label-full,
  #mainProductGrid .alm-product-card .alm-btn-cart-expand .cart-btn-label-full {
    display: none !important;
  }

  #catalogGrid .alm-product-card .alm-btn-cart-expand .cart-btn-label-short,
  #mainProductGrid .alm-product-card .alm-btn-cart-expand .cart-btn-label-short {
    display: inline !important;
  }

  #catalogGrid .alm-product-card .alm-btn-cart-expand svg,
  #mainProductGrid .alm-product-card .alm-btn-cart-expand svg {
    width: 13px !important;
    height: 13px !important;
  }

  /* Catalog Filter Chips Swipeable Horizontal Rail */
  #catalogFiltersRail,
  .catalog-filters-rail,
  .catalog-filter-bar > div,
  div:has(> .catalog-filter-chip) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0.2rem 0.2rem 0.45rem 0.2rem !important;
    margin: 0 !important;
    gap: 0.45rem !important;
    box-sizing: border-box !important;
  }

  #catalogFiltersRail::-webkit-scrollbar,
  .catalog-filters-rail::-webkit-scrollbar,
  div:has(> .catalog-filter-chip)::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .catalog-filter-chip {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    padding: 0.45rem 0.95rem !important;
    height: 38px !important;
    min-height: 38px !important;
    font-size: 0.8rem !important;
    font-weight: 650 !important;
    border-radius: var(--radius-pill) !important;
    border: 1px solid rgba(197, 168, 128, 0.35) !important;
    background: #FFFFFF !important;
    color: var(--color-slate-700) !important;
    box-sizing: border-box !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
    margin: 0 !important;
    position: static !important;
  }
  .catalog-filter-chip.active {
    background: linear-gradient(135deg, #B59364 0%, #8C6738 100%) !important;
    color: #FFFFFF !important;
    border-color: #8C6738 !important;
    box-shadow: 0 3px 10px rgba(140, 103, 56, 0.32) !important;
    font-weight: 750 !important;
  }
}

/* 4. Quick View Modal: Native Mobile Bottom Sheet (Max-Width: 640px) */
@media (max-width: 640px) {
  .alm-modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }

  .alm-modal-dialog {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 90vh !important;
    height: 90vh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    transform: translateY(100%) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .alm-modal-backdrop.show .alm-modal-dialog {
    transform: translateY(0) !important;
  }

  .alm-modal-dialog::before {
    display: none !important;
  }

  .alm-modal-top-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 80 !important;
    background: #ffffff !important;
    border-bottom: 1px solid rgba(197, 168, 128, 0.2) !important;
    padding: 0.35rem 0.85rem !important;
    height: 42px !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
  }

  .alm-modal-drag-indicator {
    display: block !important;
    width: 36px !important;
    height: 4px !important;
    border-radius: 2px !important;
    background: #CBD5E1 !important;
    margin: 0 auto !important;
    transform: translateX(14px) !important;
  }

  .alm-modal-close-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    font-size: 0.85rem !important;
    background: #F1F5F9 !important;
    border: 1px solid rgba(197, 168, 128, 0.35) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--color-slate-800) !important;
    cursor: pointer !important;
    z-index: 90 !important;
  }

  .alm-modal-grid {
    display: flex !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 1 auto !important;
    max-height: none !important;
    min-height: 0 !important;
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 16px)) !important;
  }

  .alm-modal-media-col {
    padding: 0.35rem 0.65rem 0.15rem !important;
    border-right: none !important;
    border-bottom: none !important;
    flex-shrink: 0 !important;
    background: transparent !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .alm-modal-img-stage {
    width: 100% !important;
    max-width: 100% !important;
    height: 240px !important;
    max-height: 66vw !important;
    aspect-ratio: auto !important;
    margin: 0 !important;
    border-radius: 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    background: #0E1524 !important;
    box-shadow: 0 4px 16px rgba(10, 15, 26, 0.12) !important;
    border: 1px solid rgba(197, 168, 128, 0.3) !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .alm-modal-img-stage img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
    display: block !important;
  }

  .alm-modal-sku-beacon {
    font-size: 0.6rem !important;
    padding: 0.16rem 0.5rem !important;
    top: 0.45rem !important;
    left: 0.45rem !important;
    white-space: nowrap !important;
    letter-spacing: 0.02em !important;
    border-radius: 9999px !important;
    background: rgba(14, 21, 36, 0.88) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    color: #FAF8F5 !important;
    border: 1px solid rgba(197, 168, 128, 0.38) !important;
    z-index: 10 !important;
  }

  .alm-modal-trust-strip {
    font-size: 0.62rem !important;
    padding: 0.18rem 0.5rem !important;
    gap: 0.35rem !important;
    margin-top: 0.25rem !important;
    margin-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border-radius: 9999px !important;
    background: #F8FAFC !important;
    border: 1px solid rgba(197, 168, 128, 0.22) !important;
    color: var(--color-slate-600) !important;
  }

  .alm-modal-content-col {
    padding: 0.35rem 0.65rem 0.75rem !important;
    overflow-y: visible !important;
    max-height: none !important;
    gap: 0.35rem !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .alm-modal-header-row {
    padding-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.4rem !important;
    flex-wrap: nowrap !important;
    margin-bottom: 0.15rem !important;
  }

  .alm-modal-sku-text {
    font-family: var(--font-mono) !important;
    font-size: 0.74rem !important;
    font-weight: 750 !important;
    color: #B38F5C !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    letter-spacing: 0.02em !important;
  }

  .alm-modal-product-title {
    font-size: 1.05rem !important;
    font-weight: 850 !important;
    line-height: 1.2 !important;
    color: var(--color-slate-900) !important;
    margin: 0.08rem 0 !important;
    letter-spacing: -0.01em !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .alm-modal-product-subtitle {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin-bottom: 0.25rem !important;
    color: var(--color-cyber-dark, #065F46) !important;
  }

  .alm-modal-product-desc {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
    color: var(--color-slate-600) !important;
    margin-bottom: 0.3rem !important;
  }

  .alm-modal-specs-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    margin-bottom: 0.3rem !important;
  }

  .alm-modal-specs-list .alm-spec-chip {
    font-size: 0.62rem !important;
    padding: 0.14rem 0.4rem !important;
    border-radius: 6px !important;
    background: #F8FAFC !important;
    border: 1px solid rgba(197, 168, 128, 0.22) !important;
    color: var(--color-slate-800) !important;
    font-weight: 650 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.25rem !important;
  }

  .alm-modal-config-box {
    background: #F8FAFC !important;
    border: 1px solid rgba(197, 168, 128, 0.25) !important;
    border-radius: 10px !important;
    padding: 0.45rem 0.65rem !important;
    margin-bottom: 0.35rem !important;
    gap: 0.35rem !important;
    box-sizing: border-box !important;
  }

  .alm-modal-config-label {
    font-size: 0.68rem !important;
    font-weight: 750 !important;
    margin-bottom: 0.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    letter-spacing: 0.02em !important;
  }

  .alm-modal-chips-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.28rem !important;
  }

  .alm-modal-chip {
    flex: 1 1 auto !important;
    min-height: 32px !important;
    padding: 0.22rem 0.5rem !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.2 !important;
    transition: all 0.2s ease !important;
  }

  .alm-modal-chip.active {
    background: #0E1524 !important;
    color: #FFFFFF !important;
    border-color: #C5A880 !important;
    box-shadow: 0 2px 6px rgba(10, 15, 26, 0.18) !important;
  }

  .alm-modal-chip:not(.active) {
    background: #FFFFFF !important;
    color: var(--color-slate-800) !important;
    border: 1px solid rgba(197, 168, 128, 0.32) !important;
  }

  .alm-modal-tier-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.3rem !important;
  }

  .alm-modal-tier-card {
    padding: 0.35rem 0.2rem 0.3rem !important;
    min-height: 48px !important;
    border-radius: 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    transition: all 0.2s ease !important;
  }

  /* Inactive Tier Card */
  .alm-modal-tier-card:not(.active) {
    background: #FFFFFF !important;
    border: 1px solid rgba(197, 168, 128, 0.35) !important;
  }

  .alm-modal-tier-card:not(.active) .tier-card-head {
    font-size: 0.66rem !important;
    font-weight: 750 !important;
    color: var(--color-slate-800) !important;
    margin-bottom: 0.1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .alm-modal-tier-card:not(.active) .tier-card-price {
    font-size: 0.76rem !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    font-family: var(--font-mono) !important;
    color: var(--color-slate-950) !important;
  }

  .alm-modal-tier-card:not(.active) .alm-tier-tag-pill {
    background: rgba(15, 23, 42, 0.06) !important;
    color: var(--color-slate-700) !important;
    font-size: 0.5rem !important;
    padding: 0.08rem 0.3rem !important;
  }

  .alm-modal-tier-card:not(.active) .alm-tier-tag-pill.tag-sale {
    background: rgba(197, 168, 128, 0.2) !important;
    color: #8C6738 !important;
    border: 1px solid rgba(197, 168, 128, 0.4) !important;
  }

  .alm-modal-tier-card:not(.active) .alm-tier-tag-pill.tag-top {
    background: #10B981 !important;
    color: #FFFFFF !important;
  }

  /* Active Tier Card - HIGH CONTRAST & RAZOR-SHARP LEGIBILITY */
  .alm-modal-tier-card.active {
    background: #0E1524 !important;
    border-color: #C5A880 !important;
    box-shadow: 0 4px 14px rgba(10, 15, 26, 0.28) !important;
  }

  .alm-modal-tier-card.active .tier-card-head {
    font-size: 0.66rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    margin-bottom: 0.1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .alm-modal-tier-card.active .tier-card-price {
    font-size: 0.78rem !important;
    font-weight: 850 !important;
    white-space: nowrap !important;
    font-family: var(--font-mono) !important;
    color: #E2D1B3 !important;
  }

  .alm-modal-tier-card.active .tier-card-price small {
    color: #CBD5E1 !important;
    opacity: 0.9 !important;
  }

  .alm-modal-tier-card.active .alm-tier-tag-pill {
    background: rgba(226, 209, 179, 0.28) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(226, 209, 179, 0.5) !important;
    font-size: 0.5rem !important;
    padding: 0.08rem 0.3rem !important;
  }

  .alm-modal-tier-card.active .alm-tier-tag-pill.tag-sale {
    background: #C5A880 !important;
    color: #0E1524 !important;
    font-weight: 900 !important;
    border: none !important;
  }

  .alm-modal-tier-card.active .alm-tier-tag-pill.tag-top {
    background: #10B981 !important;
    color: #FFFFFF !important;
  }

  /* Natural-flowing Mobile Checkout Section - Never flush to bottom screen edge */
  .alm-modal-checkout-section {
    position: relative !important;
    bottom: auto !important;
    background: transparent !important;
    border-top: 1px solid rgba(197, 168, 128, 0.22) !important;
    box-shadow: none !important;
    padding: 0.5rem 0 0 !important;
    margin-top: 0.3rem !important;
    margin-bottom: calc(1.75rem + env(safe-area-inset-bottom, 16px)) !important;
    padding-bottom: 0.5rem !important;
    z-index: 10 !important;
  }

  .alm-modal-pricing-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.45rem !important;
    margin-bottom: 0.4rem !important;
  }

  .alm-modal-price-stack {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.3rem !important;
    flex-wrap: wrap !important;
  }

  .alm-modal-price-current {
    font-size: 1.25rem !important;
    font-weight: 850 !important;
    font-family: var(--font-mono) !important;
    color: var(--color-slate-950) !important;
  }

  .alm-modal-price-strike {
    font-size: 0.8rem !important;
    color: var(--color-slate-400) !important;
    text-decoration: line-through !important;
    font-family: var(--font-mono) !important;
  }

  .alm-modal-save-pill {
    font-size: 0.62rem !important;
    padding: 0.1rem 0.4rem !important;
    border-radius: 9999px !important;
    background: rgba(16, 185, 129, 0.12) !important;
    color: #047857 !important;
    font-weight: 750 !important;
  }

  .alm-modal-tax-note {
    font-size: 0.62rem !important;
    color: var(--color-slate-500) !important;
    margin-top: 0.1rem !important;
  }

  .alm-modal-stepper {
    display: flex !important;
    align-items: center !important;
    gap: 0.2rem !important;
    background: #f8fafc !important;
    border: 1px solid rgba(197, 168, 128, 0.35) !important;
    border-radius: 9999px !important;
    padding: 2px !important;
    flex-shrink: 0 !important;
  }

  .alm-modal-step-btn {
    width: 24px !important;
    height: 24px !important;
    border-radius: 9999px !important;
    font-size: 0.85rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(197, 168, 128, 0.25) !important;
    color: var(--color-slate-800) !important;
  }

  .alm-modal-step-val {
    font-size: 0.78rem !important;
    font-weight: 750 !important;
    min-width: 1.25rem !important;
    text-align: center !important;
    font-family: var(--font-mono) !important;
  }

  .alm-modal-actions-row {
    display: flex !important;
    gap: 0.45rem !important;
    align-items: center !important;
    margin-top: 0.35rem !important;
    margin-bottom: 0.35rem !important;
  }

  .alm-modal-actions-row .alm-btn {
    min-height: 44px !important;
    height: 44px !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 0.75rem !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }

  #modalAddToCartActionBtn {
    flex: 1.6 !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
  }

  #modalViewDetailLink {
    flex: 1 !important;
    font-size: 0.8rem !important;
    font-weight: 700 !important;
  }
}

/* 5. Cart Drawer Mobile Perfection (Max-Width: 768px) */
@media (max-width: 768px) {
  .alm-drawer {
    width: 100% !important;
    max-width: 100% !important;
  }

  .alm-drawer-header {
    padding: 0.75rem 1rem !important;
    gap: 0.5rem !important;
    align-items: center !important;
  }

  .alm-drawer-title {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    gap: 0.4rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -0.01em !important;
  }

  .alm-drawer-title svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
  }

  .alm-drawer-count-badge {
    font-size: 0.68rem !important;
    padding: 0.1rem 0.42rem !important;
    margin-left: 0.15rem !important;
    display: inline-block !important;
  }

  .alm-drawer-clear-btn {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.7rem !important;
    border-radius: var(--radius-pill) !important;
    gap: 0.25rem !important;
    line-height: 1 !important;
  }

  .alm-drawer-clear-btn svg {
    width: 11px !important;
    height: 11px !important;
  }

  .alm-drawer-close-btn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important;
    line-height: 1 !important;
    background-color: var(--color-slate-100) !important;
    border: 1px solid var(--color-slate-200) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
  }

  .alm-drawer-close-btn::before {
    content: "✕" !important;
    font-size: 0.92rem !important;
    font-weight: 750 !important;
    color: var(--color-slate-700) !important;
    display: block !important;
  }

  .alm-drawer-close-btn:active {
    background-color: var(--color-slate-200) !important;
    transform: scale(0.95);
  }

  .alm-shipping-meter {
    padding: 0.55rem 1rem !important;
  }

  .alm-shipping-meter-text {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
  }

  .alm-shipping-meter-bar {
    height: 4px !important;
    margin-top: 0.3rem !important;
  }

  .alm-drawer-body {
    padding: 0.65rem 0.85rem !important;
    gap: 0.5rem !important;
  }

  .alm-cart-item {
    padding: 0.65rem 0.75rem !important;
    border-radius: 10px !important;
    gap: 0.45rem !important;
  }

  .alm-cart-item-row-1 {
    gap: 0.65rem !important;
  }

  .alm-cart-item-thumb {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  }
  .alm-cart-item-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  .alm-cart-item-tag {
    font-size: 0.64rem !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 0.15rem !important;
  }

  .alm-cart-item-name {
    font-size: 0.79rem !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
  }

  .alm-cart-item-row-2 {
    padding-top: 0.35rem !important;
    margin-top: 0.35rem !important;
  }

  .alm-cart-stepper {
    height: 28px !important;
    background: #F8F9FA !important;
    border: 1px solid rgba(197, 168, 128, 0.5) !important;
  }

  .alm-stepper-btn {
    width: 26px !important;
    height: 26px !important;
    font-size: 0.92rem !important;
    font-weight: 850 !important;
  }

  .alm-stepper-value {
    min-width: 24px !important;
    font-size: 0.82rem !important;
    font-weight: 850 !important;
  }

  .alm-cart-item-price {
    font-size: 0.94rem !important;
    font-weight: 850 !important;
  }

  .alm-cart-remove-btn {
    padding: 0.22rem 0.55rem !important;
    font-size: 0.7rem !important;
    gap: 0.25rem !important;
    background: rgba(239, 68, 68, 0.08) !important;
    border: 1px solid rgba(239, 68, 68, 0.22) !important;
    color: #DC2626 !important;
  }

  .alm-cart-remove-btn svg {
    width: 11px !important;
    height: 11px !important;
  }

  .alm-drawer-footer {
    padding: 0.65rem 0.9rem calc(0.75rem + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0.4rem !important;
  }

  .alm-drawer-promo-box {
    gap: 0.4rem !important;
  }

  .alm-drawer-promo-box .alm-drawer-promo-input {
    font-size: 0.75rem !important;
    padding: 0.38rem 0.6rem !important;
    height: 32px !important;
    border-radius: 6px !important;
  }

  .alm-drawer-promo-box .alm-btn {
    height: 32px !important;
    min-height: 32px !important;
    padding: 0 0.75rem !important;
    font-size: 0.75rem !important;
    border-radius: 6px !important;
  }

  .alm-drawer-summary-line {
    font-size: 0.76rem !important;
    line-height: 1.3 !important;
  }

  .alm-drawer-total-line {
    font-size: 0.95rem !important;
    padding-top: 0.35rem !important;
    margin-top: 0.1rem !important;
  }

  .alm-drawer-total-val {
    font-size: 1.15rem !important;
    font-weight: 850 !important;
  }

  .alm-drawer-footer > div:last-child,
  .alm-drawer-footer > div[style*="display: flex"][style*="gap"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    margin-top: 0.2rem !important;
  }

  .alm-drawer-footer > div:last-child a.alm-btn-cyber,
  .alm-drawer-footer > div[style*="display: flex"][style*="gap"] a.alm-btn-cyber {
    width: 100% !important;
    flex: none !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 1rem !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    justify-content: center !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 4px 14px rgba(179, 143, 92, 0.25) !important;
  }

  .alm-drawer-footer > div:last-child a.alm-btn-outline,
  .alm-drawer-footer > div[style*="display: flex"][style*="gap"] a.alm-btn-outline {
    width: 100% !important;
    flex: none !important;
    min-height: 32px !important;
    height: 32px !important;
    padding: 0 0.8rem !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: var(--color-slate-600) !important;
    border-color: var(--color-slate-200) !important;
    background: var(--color-slate-50) !important;
    justify-content: center !important;
    border-radius: var(--radius-pill) !important;
  }

  .alm-drawer-footer > div:last-child a.alm-btn-outline:hover,
  .alm-drawer-footer > div[style*="display: flex"][style*="gap"] a.alm-btn-outline:hover {
    background: var(--color-slate-100) !important;
    color: var(--color-slate-900) !important;
  }
}

/* 6. Product Detail View Mobile Optimization */
.alm-mobile-detail-sticky-bar {
  display: none;
}

@media (max-width: 768px) {
  .alm-mobile-detail-sticky-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: rgba(14, 21, 36, 0.96) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-top: 1px solid rgba(197, 168, 128, 0.35) !important;
    padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px)) !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.35) !important;
  }

  .sticky-bar-info {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  .sticky-bar-title {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: #FAF4EB !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .sticky-bar-price {
    font-family: var(--font-mono) !important;
    font-size: 1.1rem !important;
    font-weight: 850 !important;
    color: #C5A880 !important;
  }

  .sticky-bar-btn {
    min-height: 42px !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.82rem !important;
    font-weight: 750 !important;
    border-radius: var(--radius-sm) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  #productDetailWrapper {
    padding-bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .alm-detail-media-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    max-height: min(88vw, 380px) !important;
    padding: 0 !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    position: relative !important;
    background: #0E1524 !important;
  }

  .alm-detail-main-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border-radius: 0 !important;
  }

  .alm-detail-trust-cards {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.45rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .alm-detail-order-box {
    padding: 1.25rem 1rem !important;
  }

  .alm-detail-tier-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }
}

/* 7. Footer Mobile Cleanliness */
@media (max-width: 768px) {
  .alm-footer-trust-strip {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
  }

  .alm-footer-main-grid {
    grid-template-columns: 1fr !important;
    gap: 1.35rem !important;
  }

  .alm-footer-col-brand {
    grid-column: span 1 !important;
  }

  .alm-footer-bottom-bar {
    flex-direction: column !important;
    gap: 0.75rem !important;
    text-align: center !important;
    align-items: center !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)) !important;
  }
}


/* ==========================================================================
   HOMEPAGE INTERACTIVE TAB SWITCHERS & COMPACT 2-PER-ROW SLIDER STYLING
   ========================================================================== */

/* 1. Interactive Diagnostic Suite Switcher */
.diagnostic-suite-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #0B1120;
  border: 1px solid rgba(197, 168, 128, 0.28);
  border-radius: var(--radius-pill);
  padding: 0.35rem;
  max-width: 920px;
  margin: 0 auto 1.5rem;
  box-shadow: none;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.diagnostic-suite-switcher::-webkit-scrollbar {
  display: none;
}

.suite-tab-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.15rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: #94A3B8;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s ease;
  flex-shrink: 0;
}

.suite-tab-btn:hover {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.06);
}

.suite-tab-btn .tab-label-short {
  display: none;
}
.suite-tab-btn .tab-label-full {
  display: inline;
}

.collection-tab-btn .coll-label-short {
  display: none;
}
.collection-tab-btn .coll-label-full {
  display: inline;
}

.suite-tab-btn.active {
  background: linear-gradient(135deg, #C5A880 0%, #A88658 100%);
  color: #080C14;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 14px rgba(197, 168, 128, 0.35);
}

/* 2. Product Collection Switcher */
.product-collection-switcher {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #FFFFFF;
  border: 1px solid rgba(197, 168, 128, 0.25);
  border-radius: var(--radius-pill);
  padding: 0.35rem;
  max-width: 600px;
  margin: 0 auto 1.5rem;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05);
}

.collection-tab-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  background: transparent;
  color: var(--color-slate-700);
  font-size: 0.82rem;
  font-weight: 750;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.22s ease;
}

.collection-tab-btn:hover {
  background: rgba(197, 168, 128, 0.08);
  color: #0E1524;
}

.collection-tab-btn.active {
  background: #0E1524;
  color: #C5A880;
  border-color: #C5A880;
  box-shadow: 0 3px 10px rgba(10, 14, 23, 0.25);
}

/* 3. Interactive Curated Bundles Switcher (Desktop base rules) */
.bundle-tab-switcher {
  display: none;
}
.bundle-card-tab-item {
  display: flex !important;
}

/* 4. Interactive Brand Story & Manifest Switcher (Desktop base rules) */
.manifest-tab-switcher {
  display: none;
}
.manifest-card-tab-item {
  display: flex !important;
}

.manifest-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: auto;
  padding-top: 1.35rem;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.manifest-stat-pill {
  background: rgba(197, 168, 128, 0.08);
  border: 1px solid rgba(197, 168, 128, 0.25);
  border-radius: 10px;
  padding: 0.8rem 0.65rem;
  text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.manifest-stat-pill:hover {
  border-color: rgba(197, 168, 128, 0.5);
  transform: translateY(-2px);
}

.manifest-stat-pill .stat-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.25rem;
  font-weight: 850;
  color: var(--color-slate-900);
  line-height: 1.15;
}

.manifest-stat-pill .stat-desc {
  display: block;
  font-size: 0.72rem;
  color: var(--color-slate-600);
  margin-top: 0.3rem;
  line-height: 1.3;
}

.manifest-telemetry-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding: 0.7rem 0.85rem;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(197, 168, 128, 0.25);
  border-radius: 8px;
}

.telemetry-bar-item {
  flex: 1;
  text-align: center;
}

.telemetry-bar-item .tel-label {
  display: block;
  font-size: 0.62rem;
  color: #94A3B8;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.telemetry-bar-item .tel-val {
  display: block;
  font-size: 1.05rem;
  font-weight: 850;
  font-family: var(--font-mono);
  margin: 0.15rem 0;
}

.telemetry-bar-item.crit .tel-val {
  color: #F87171;
}

.telemetry-bar-item.opt .tel-val {
  color: var(--color-cyber-lime);
}

.telemetry-bar-item .tel-status {
  display: block;
  font-size: 0.62rem;
  color: #CBD5E1;
  line-height: 1.2;
}

.telemetry-bar-divider {
  font-size: 0.85rem;
  color: #64748B;
  flex-shrink: 0;
}

/* 5. Interactive Medical & Engineering Board Switcher (Desktop base rules) */
.expert-tab-switcher {
  display: none;
}
.expert-card-tab-item {
  display: flex !important;
}

.expert-key-statement {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 1.15rem;
  padding: 0.75rem 0.95rem;
  background: rgba(197, 168, 128, 0.08);
  border-left: 3px solid #C5A880;
  border-radius: 0 8px 8px 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-slate-800);
}

.expert-key-statement .statement-badge {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 750;
  color: #8C6D3B;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* 6. Interactive Fachjournal Switcher (Desktop base rules) */
.journal-tab-switcher {
  display: none;
}
.journal-card-tab-item {
  display: flex !important;
}

.journal-card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.journal-dossier-tag {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--color-slate-400);
  white-space: nowrap;
  flex-shrink: 0;
  font-weight: 700;
}

.badge-text-short {
  display: none;
}
.badge-text-full {
  display: inline;
}

.journal-img-wrapper {
  width: 100%;
  height: 180px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1rem;
  border: 1px solid rgba(0,0,0,0.06);
}
.journal-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.journal-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--color-slate-900);
  line-height: 1.35;
  margin-bottom: 0.45rem;
}

.journal-card-author {
  font-size: 0.78rem;
  color: var(--color-slate-500);
  margin-bottom: 0.75rem;
}

.journal-card-desc {
  font-size: 0.88rem;
  color: var(--color-slate-600);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

/* 3. Compact 2-Cards-Per-Row Carousel Slider Architecture */
.alm-carousel-track .alm-product-card {
  flex: 0 0 calc(25% - 0.75rem);
  min-width: 210px;
  max-width: 260px;
  scroll-snap-align: start;
}

.alm-carousel-track .alm-product-card .alm-product-media {
  height: 165px !important;
  padding: 0.4rem !important;
}

.alm-carousel-track .alm-product-card .alm-product-body {
  padding: 0.75rem !important;
  gap: 0.25rem !important;
}

.alm-carousel-track .alm-product-card .alm-product-title {
  font-size: 0.84rem !important;
  line-height: 1.25 !important;
  margin: 0 0 0.2rem 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

.alm-carousel-track .alm-product-card .alm-product-desc {
  display: none !important; /* Hide long paragraph in compact slider cards */
}

.alm-carousel-track .alm-product-card .alm-product-specs {
  display: none !important; /* Hide specs chips in slider to keep height uniform */
}

.alm-carousel-track .alm-product-card .alm-product-footer {
  padding-top: 0.45rem !important;
  margin-top: auto !important;
  border-top: 1px solid rgba(197, 168, 128, 0.15) !important;
}

.alm-carousel-track .alm-product-card .alm-product-price {
  font-size: 1.05rem !important;
}

.alm-carousel-track .alm-product-card .alm-product-tax-note {
  font-size: 0.62rem !important;
}

.alm-carousel-track .alm-product-card .alm-product-delivery-pill {
  font-size: 0.62rem !important;
  padding: 0.1rem 0.35rem !important;
}

.alm-carousel-track .alm-product-card .alm-btn-inspect-spec {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
}

.alm-carousel-track .alm-product-card .alm-btn-cart-expand {
  height: 34px !important;
  font-size: 0.75rem !important;
  padding: 0.35rem 0.55rem !important;
}

@media (max-width: 1080px) {
  .alm-carousel-track .alm-product-card {
    flex: 0 0 calc(33.333% - 0.65rem);
    min-width: 190px;
    max-width: 230px;
  }
}

/* Exact Requirement: On Mobile/Tablet, 2 CARDS PER ROW in Sliders */
@media (max-width: 640px) {
  .alm-carousel-track {
    gap: 0.55rem !important;
    padding: 0.25rem 0.1rem 0.35rem !important;
    margin-bottom: 0.2rem !important;
    scroll-snap-type: x mandatory !important;
  }

  .alm-carousel-track .alm-product-card {
    flex: 0 0 calc(50% - 0.28rem) !important;
    min-width: 140px !important;
    max-width: calc(50% - 0.28rem) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(197, 168, 128, 0.22) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    scroll-snap-align: start !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-media {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    position: relative !important;
    background: #0E1524 !important;
    overflow: hidden !important;
    border-bottom: 1px solid rgba(197, 168, 128, 0.18) !important;
    border-radius: 9px 9px 0 0 !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-media-link {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-decoration: none !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-media-link img,
  .alm-carousel-track .alm-product-card .alm-product-media-link svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-media-tag {
    top: 0.35rem !important;
    left: 0.35rem !important;
    padding: 0.12rem 0.35rem !important;
    font-size: 0.55rem !important;
    white-space: nowrap !important;
    border-radius: 4px !important;
    letter-spacing: 0.02em !important;
    background: rgba(10, 14, 23, 0.85) !important;
    z-index: 5 !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-wishlist-btn {
    top: 0.35rem !important;
    right: 0.35rem !important;
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    background: rgba(255, 255, 255, 0.9) !important;
    border-radius: 50% !important;
    border: 1px solid rgba(197, 168, 128, 0.3) !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-wishlist-btn svg {
    width: 13px !important;
    height: 13px !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-hover-actions {
    display: none !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-body {
    padding: 0.5rem 0.45rem 0.55rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 0.2rem !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.2rem !important;
    margin-bottom: 0.2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-header-row .alm-badge {
    font-size: 0.54rem !important;
    font-weight: 750 !important;
    padding: 0.12rem 0.35rem !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 65% !important;
    line-height: 1.2 !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-rating {
    font-size: 0.65rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.15rem !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-rating .rating-count {
    display: none !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-title {
    font-size: 0.74rem !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    height: 2.5em !important;
    margin: 0 0 0.25rem 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-title a {
    color: var(--color-slate-900) !important;
    text-decoration: none !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-desc,
  .alm-carousel-track .alm-product-card .alm-product-specs {
    display: none !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    padding-top: 0.35rem !important;
    margin-top: auto !important;
    border-top: 1px solid rgba(197, 168, 128, 0.15) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-footer-meta {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-price-stack {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 0.35rem !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-price {
    font-size: 1rem !important;
    font-weight: 850 !important;
    font-family: var(--font-mono) !important;
    color: var(--color-slate-900) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-tax-note {
    font-size: 0.55rem !important;
    color: var(--color-slate-500) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    display: inline-block !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-delivery-pill {
    display: none !important;
  }

  .alm-carousel-track .alm-product-card .alm-product-footer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1.35fr !important;
    gap: 0.3rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-carousel-track .alm-product-card .alm-btn-inspect-spec {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    width: 100% !important;
    min-width: 0 !important;
    padding: 0 0.3rem !important;
    border-radius: 6px !important;
    border: 1px solid rgba(197, 168, 128, 0.45) !important;
    background: #FFFFFF !important;
    color: var(--color-slate-800) !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    box-shadow: none !important;
  }

  .alm-carousel-track .alm-product-card .alm-btn-inspect-spec:active {
    background: rgba(197, 168, 128, 0.12) !important;
  }

  .alm-carousel-track .alm-product-card .alm-btn-cart-expand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
    padding: 0 0.4rem !important;
    border-radius: 6px !important;
    background: linear-gradient(135deg, #C5A880 0%, #A88658 100%) !important;
    border: 1px solid #C5A880 !important;
    color: #0E1524 !important;
    font-size: 0.68rem !important;
    font-weight: 850 !important;
    box-sizing: border-box !important;
    box-shadow: 0 1px 4px rgba(197, 168, 128, 0.25) !important;
    cursor: pointer !important;
  }

  .alm-carousel-track .alm-product-card .alm-btn-cart-expand:active {
    background: linear-gradient(135deg, #D4B890 0%, #B89668 100%) !important;
  }

  .alm-carousel-track .alm-product-card .alm-btn-inspect-spec span {
    display: inline !important;
    font-size: 0.66rem !important;
    line-height: 1 !important;
  }

  .alm-carousel-track .alm-product-card .alm-btn-cart-expand .cart-btn-label-full {
    display: none !important;
  }

  .alm-carousel-track .alm-product-card .alm-btn-cart-expand .cart-btn-label-short {
    display: inline !important;
    font-size: 0.66rem !important;
    line-height: 1 !important;
  }

  .alm-carousel-track .alm-product-card .alm-btn-inspect-spec svg,
  .alm-carousel-track .alm-product-card .alm-btn-cart-expand svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
  }

  /* Carousel Header Badge Row in Mobile */
  .carousel-badge-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.35rem !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    margin-bottom: 0.35rem !important;
  }

  .carousel-badge-main .badge-text-full {
    display: none !important;
  }
  .carousel-badge-main .badge-text-short {
    display: inline !important;
  }

  .carousel-badge-main {
    font-size: 0.6rem !important;
    padding: 0.2rem 0.5rem !important;
    white-space: nowrap !important;
    border-radius: var(--radius-pill) !important;
    line-height: 1.2 !important;
    letter-spacing: 0.03em !important;
    flex-shrink: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .carousel-badge-status {
    font-size: 0.6rem !important;
    padding: 0.2rem 0.5rem !important;
    white-space: nowrap !important;
    border-radius: var(--radius-pill) !important;
    line-height: 1.2 !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .carousel-badge-status .radar-beacon {
    width: 6px !important;
    height: 6px !important;
    margin-right: 0.3rem !important;
    flex-shrink: 0 !important;
  }

  .carousel-badge-status .radar-beacon::after {
    top: -3px !important;
    left: -3px !important;
    width: 12px !important;
    height: 12px !important;
  }
}


/* ==========================================================================
   COMPREHENSIVE MOBILE PHONE OPTIMIZATION LAYER (HOMEPAGE & GLOBAL)
   ========================================================================== */

/* 1. Base Container & Viewport Hygiene */
@media (max-width: 768px) {
  body, html, main {
    overflow-x: clip !important;
    max-width: 100vw !important;
  }

  .alm-section {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
  }

  .alm-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* Safe German word wrapping without broken syllables */
  h1, h2, h3, h4, .flow-step-title, .alm-product-title, .alm-faq-question, .journal-card-title {
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: manual !important;
    -webkit-hyphens: manual !important;
  }

  h2 {
    font-size: clamp(1.35rem, 5vw, 1.8rem) !important;
    line-height: 1.25 !important;
  }
}

/* 2. Responsive Grids (Desktop, Tablet, Phone) */
.hud-bento-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 0;
}

.wizard-options-grid {
  display: grid;
}

.wizard-options-grid-3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 0.85rem;
}

.wizard-options-grid-4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

@media (max-width: 900px) {
  .hud-bento-grid {
    grid-template-columns: 1fr !important;
    gap: 0.85rem !important;
  }

  .wizard-options-grid-4 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
  }
}

@media (max-width: 640px) {
  .wizard-options-grid-3,
  .wizard-options-grid-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
}

/* 3. Universal Bento Card Mobile Padding Override */
@media (max-width: 640px) {
  .bento-card,
  .col-8.bento-card,
  .col-7.bento-card,
  .col-6.bento-card,
  .col-5.bento-card,
  .col-4.bento-card {
    padding: 1.15rem 0.95rem !important;
    border-radius: var(--radius-lg) !important;
  }
}

/* 4. Hero Section Mobile Optimization */
@media (max-width: 640px) {
  .col-8.bento-card.tech-grid-dark {
    padding: 1.25rem 1rem !important;
  }

  .col-8.bento-card.tech-grid-dark h1 {
    font-size: 1.3rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.65rem !important;
  }

  .col-8.bento-card.tech-grid-dark p {
    font-size: 0.84rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0.85rem !important;
  }

  .hero-compare-box {
    padding: 0.85rem 0.75rem !important;
    margin-top: 0.75rem !important;
    border-radius: var(--radius-md) !important;
  }

  #heroPressureDisplayZone {
    padding: 0.65rem 0.75rem !important;
    overflow: hidden !important;
  }

  #heroPressureStatusDisplay {
    font-size: clamp(0.62rem, 2.5vw, 0.72rem) !important;
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    line-height: 1.2 !important;
  }

  #heroPressureStatusDisplay .radar-beacon {
    width: 6.5px !important;
    height: 6.5px !important;
    min-width: 6.5px !important;
    min-height: 6.5px !important;
    margin-right: 0.38rem !important;
    flex-shrink: 0 !important;
  }

  #heroPressureStatusDisplay .radar-beacon::after {
    top: -2px !important;
    left: -2px !important;
    width: 10.5px !important;
    height: 10.5px !important;
    border-width: 1px !important;
  }

  #heroPressureValDisplay {
    font-size: clamp(0.98rem, 3.2vw, 1.15rem) !important;
  }

  #heroPressureDescDisplay {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
  }

  .col-8.bento-card .alm-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.65rem 1rem !important;
    font-size: 0.82rem !important;
  }
}

/* Utility Responsive Classes */
.mob-only {
  display: none !important;
}
.desk-only {
  display: inline !important;
}
@media (max-width: 640px) {
  .mob-only {
    display: inline !important;
  }
  .desk-only {
    display: none !important;
  }
}

/* Hero Toggles Always 1 Row on Mobile */
.hero-toggle-bar {
  display: flex !important;
  flex-direction: row !important;
  gap: 0.35rem !important;
  padding: 4px 3px !important;
  width: 100% !important;
  overflow: visible !important;
}

.hero-toggle-btn {
  flex: 1 1 50% !important;
  width: 50% !important;
  text-align: center !important;
  padding: 0.45rem 0.25rem !important;
  font-size: 0.72rem !important;
  white-space: nowrap !important;
  border-radius: 6px !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

.hero-toggle-btn:focus {
  outline: none !important;
}

.hero-toggle-btn:focus-visible {
  outline: 2px solid #C5A880 !important;
  outline-offset: 1px !important;
}

/* Hero KPI Container - 2 Cards per Row */
.hero-kpi-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.85rem;
}

@media (min-width: 992px) {
  .hero-kpi-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.85rem;
  }
}

@media (max-width: 768px) {
  .hero-kpi-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
  }

  .hero-kpi-card {
    padding: 0.85rem 0.75rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    border-radius: var(--radius-md) !important;
    min-height: 130px !important;
  }

  .hero-kpi-num {
    font-size: 1.45rem !important;
  }
}

/* 5. Section 2: Biomarkers Mobile Flow (2 In A Row On Mobile) */
@media (max-width: 640px) {
  .flow-ribbon-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.55rem !important;
  }

  .flow-step-card {
    padding: 0.75rem 0.65rem !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .flow-step-num {
    font-size: 0.62rem !important;
    margin-bottom: 0.25rem !important;
  }

  .flow-step-title {
    font-size: 0.82rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.25rem !important;
    min-height: auto !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .flow-step-problem {
    font-size: 0.68rem !important;
    margin-bottom: 0.25rem !important;
    line-height: 1.25 !important;
    min-height: auto !important;
    padding: 0.35rem 0.45rem !important;
    gap: 0.3rem !important;
  }

  .flow-step-solution {
    font-size: 0.68rem !important;
    line-height: 1.35 !important;
    word-break: break-word !important;
  }
}

/* 6. Section 3: Diagnostik-Suite Mobile Architecture */
@media (max-width: 768px) {
  .diagnostic-suite-switcher {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem !important;
    padding: 0.35rem !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    background: #0B1120 !important;
    border: 1px solid rgba(197, 168, 128, 0.28) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    box-shadow: none !important;
  }

  .suite-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    padding: 0.52rem 0.35rem !important;
    font-size: 0.74rem !important;
    font-weight: 750 !important;
    border-radius: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
    white-space: nowrap !important;
    flex-shrink: 1 !important;
  }

  .suite-tab-btn .tab-label-full {
    display: none !important;
  }
  .suite-tab-btn .tab-label-short {
    display: inline !important;
  }

  #diagnostik-suite,
  .diagnostic-tab-panel,
  #diagPanelHud {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  /* Panel 1: HUD Cockpit */
  .hud-cockpit-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: var(--radius-md) !important;
  }

  .hud-bento-grid {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hud-stage-container {
    padding: 0.75rem 0.65rem !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .hud-stage-header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin-bottom: 0.55rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .hud-stage-tag {
    font-size: clamp(0.58rem, 2.5vw, 0.66rem) !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-shrink: 1 !important;
    min-width: 0 !important;
    letter-spacing: 0.03em !important;
  }

  .hud-stage-tag span {
    white-space: nowrap !important;
  }

  .hud-stage-tag .hud-sensor-icon {
    width: 11px !important;
    height: 11px !important;
    min-width: 11px !important;
    min-height: 11px !important;
    flex-shrink: 0 !important;
  }

  .hud-stage-telemetry-badge {
    font-size: clamp(0.52rem, 2.2vw, 0.62rem) !important;
    padding: 0.15rem 0.45rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .hud-image-viewport {
    height: 195px !important;
    max-height: 195px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    border-radius: 8px !important;
    margin-bottom: 0.55rem !important;
  }

  .hud-telemetry-img {
    width: 100% !important;
    height: 100% !important;
    max-height: 195px !important;
    object-fit: cover !important;
    object-position: center 30% !important;
  }

  .hud-node-selector-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem !important;
    padding: 5px 2px !important;
    margin: 0.25rem 0 0.15rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .hud-node-selector-bar::-webkit-scrollbar {
    display: none !important;
  }

  .hud-node-selector-bar button:nth-child(5) {
    grid-column: span 2 !important;
  }

  .alm-hud-pill {
    padding: 0.45rem 0.35rem !important;
    font-size: 0.68rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    justify-content: center !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
  }

  .alm-hud-pill:focus {
    outline: none !important;
  }

  .alm-hud-pill:focus-visible {
    outline: 2px solid #C5A880 !important;
    outline-offset: 1px !important;
  }

  .alm-hud-pill.active {
    box-shadow: 0 0 0 1.5px #C5A880, inset 0 0 8px rgba(197, 168, 128, 0.2) !important;
    border-color: #C5A880 !important;
    background: #0E1524 !important;
  }

  .alm-hud-pill span:not(.pill-dot) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .hud-action-row .alm-btn,
  .hud-action-btn {
    white-space: nowrap !important;
    word-break: keep-all !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.72rem !important;
    padding: 0.45rem 0.35rem !important;
    min-height: 34px !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .hud-action-row .alm-btn span,
  .hud-action-btn span {
    white-space: nowrap !important;
    word-break: keep-all !important;
    display: inline !important;
  }

  .hud-telemetry-panel {
    padding: 0.75rem 0.65rem !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .hud-action-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .hud-action-row > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Panel 2: Sitzdruck-Rechner (Unified Adaptive) */
  .rechner-unified-card {
    padding: 0.85rem 0.75rem !important;
    border-radius: var(--radius-lg) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .rechner-inputs-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
    margin: 0.65rem 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .rechner-input-box {
    padding: 0.55rem 0.65rem !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .rechner-input-group {
    padding: 0.65rem 0.75rem !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .rechner-stage-card {
    padding: 0.85rem 0.75rem !important;
    box-sizing: border-box !important;
  }

  .rechner-stage-header {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  .rechner-telemetry-viewport {
    max-height: 180px !important;
  }

  .rechner-telemetry-img {
    max-height: 180px !important;
    object-fit: contain !important;
  }

  .rechner-comparison-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
    margin-top: 0 !important;
    margin-bottom: 0.65rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .rechner-gauge-container {
    padding: 0.65rem 0.75rem !important;
    margin: 0.65rem 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .rechner-stats-row {
    padding: 0.65rem 0.75rem !important;
    margin-bottom: 0.65rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .rechner-comp-card {
    padding: 0.55rem 0.6rem !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .comp-card-badge {
    font-size: 0.58rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .comp-card-value {
    font-size: 0.95rem !important;
    white-space: nowrap !important;
  }

  .comp-card-desc {
    font-size: 0.66rem !important;
    line-height: 1.25 !important;
  }

  /* Panel 3: Split Slider Adaptive User-Friendly Mobile */
  .split-compare-container {
    height: 335px !important;
    min-height: 320px !important;
    border-radius: var(--radius-lg) !important;
  }

  .split-visual-side {
    display: none !important;
  }

  .split-content-side {
    width: 100% !important;
    min-width: 0 !important;
    padding: 1rem 0.95rem !important;
    justify-content: space-between !important;
  }

  .split-header-row {
    flex-wrap: wrap !important;
    gap: 0.35rem 0.5rem !important;
    margin-bottom: 0.4rem !important;
  }

  .split-label-full {
    display: none !important;
  }
  .split-label-short {
    display: inline !important;
  }

  .split-badge-standard,
  .split-badge-muffintop {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.5rem !important;
  }

  .split-metric-tag {
    font-size: 0.76rem !important;
  }

  .split-title {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.35rem !important;
  }

  .split-text {
    font-size: 0.78rem !important;
    line-height: 1.42 !important;
  }

  .split-checklist-row {
    font-size: 0.66rem !important;
    gap: 0.25rem 0.45rem !important;
    line-height: 1.3 !important;
  }

  .split-compare-knob {
    width: 38px !important;
    height: 38px !important;
    font-size: 0.62rem !important;
  }

  /* Panel 4: Bedarfs-Konfigurator Wizard Step-by-Step 2-Col Mobile */
  .diagnostic-wizard-box {
    border-radius: var(--radius-lg) !important;
  }

  .wizard-step-header {
    padding: 0.95rem 1rem !important;
  }

  .diagnostic-wizard-box > div[style*="padding: 2.25rem"],
  .diagnostic-wizard-box > div {
    padding: 1rem 0.95rem !important;
  }

  .wizard-question-title {
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    color: var(--color-slate-600) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    margin-bottom: 0.75rem !important;
    line-height: 1.35 !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  .wizard-question-title::before {
    display: none !important;
  }

  .wizard-options-grid-3,
  .wizard-options-grid-4 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }

  .wizard-option-card {
    padding: 0.65rem 0.6rem !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: 108px !important;
    box-sizing: border-box !important;
    position: relative !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .wizard-options-grid-3 .wizard-option-card:nth-child(3):last-child {
    grid-column: span 2 !important;
  }

  .wizard-option-card .opt-icon,
  .wizard-option-card > div:first-child {
    font-size: 1.3rem !important;
    margin-bottom: 0.2rem !important;
  }

  .wizard-option-card .opt-title,
  .wizard-option-card > div:nth-child(2) {
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    margin-bottom: 0.18rem !important;
    color: var(--color-slate-900) !important;
  }

  .wizard-option-card .opt-desc,
  .wizard-option-card > div:nth-child(3) {
    font-size: 0.66rem !important;
    line-height: 1.32 !important;
    color: var(--color-slate-600) !important;
  }

  .wizard-option-card.selected::after {
    top: 0.4rem !important;
    right: 0.4rem !important;
    width: 17px !important;
    height: 17px !important;
    font-size: 0.6rem !important;
  }

  .wizard-step-container {
    animation: fadeInStep 0.22s ease-out;
  }

  @keyframes fadeInStep {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* Bedarfs-Konfigurator Result Box Mobile */
  .wizard-content-body {
    padding: 0.85rem 0.55rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .wizard-result-box {
    padding: 0.65rem 0.55rem !important;
    border-radius: var(--radius-md) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .wizard-result-topbar {
    margin-bottom: 0.35rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.35rem !important;
  }

  .wizard-result-topbar .alm-badge {
    font-size: 0.58rem !important;
    padding: 0.12rem 0.4rem !important;
  }

  .wizard-result-proto-id {
    font-size: 0.62rem !important;
  }

  .wizard-result-title {
    font-size: 0.96rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.2rem !important;
    text-align: left !important;
    font-weight: 800 !important;
  }

  .wizard-result-lead {
    font-size: 0.72rem !important;
    line-height: 1.32 !important;
    margin-bottom: 0.45rem !important;
    text-align: left !important;
  }

  .wizard-result-card {
    padding: 0.55rem !important;
    gap: 0.45rem !important;
    margin-bottom: 0.5rem !important;
    border-radius: 8px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
  }

  /* Vitrine media showcase on mobile: big, prominent, crystal clear, uncropped */
  .wizard-result-media {
    width: 100% !important;
    height: 165px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    border-radius: 7px !important;
    background: #0E1524 !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
    border: 1px solid rgba(197, 168, 128, 0.3) !important;
    box-sizing: border-box !important;
  }

  .wizard-result-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
  }

  .wizard-result-media .wizard-result-badge {
    position: absolute !important;
    top: 7px !important;
    left: 7px !important;
    font-family: var(--font-mono) !important;
    font-size: 0.54rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    padding: 0.16rem 0.45rem !important;
    height: 20px !important;
    line-height: 1 !important;
    background: rgba(197, 168, 128, 0.96) !important;
    color: #080C14 !important;
    border-radius: var(--radius-pill) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }

  .wizard-result-media .wizard-result-stock-tag {
    position: absolute !important;
    bottom: 7px !important;
    right: 7px !important;
    font-family: var(--font-mono) !important;
    font-size: 0.54rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    color: #34D399 !important;
    background: rgba(6, 78, 59, 0.9) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    padding: 0.14rem 0.45rem !important;
    height: 19px !important;
    line-height: 1 !important;
    border-radius: 4px !important;
    border: 1px solid rgba(52, 211, 153, 0.4) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4) !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 2 !important;
  }

  .wizard-result-sku-badge {
    position: absolute !important;
    bottom: 7px !important;
    left: 7px !important;
    background: rgba(10, 14, 23, 0.9) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    font-family: var(--font-mono) !important;
    font-size: 0.54rem !important;
    color: #C5A880 !important;
    padding: 0.12rem 0.4rem !important;
    height: 19px !important;
    border-radius: 4px !important;
    font-weight: 800 !important;
    border: 1px solid rgba(197, 168, 128, 0.35) !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4) !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    z-index: 2 !important;
  }

  .wizard-result-details {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
    text-align: left !important;
    box-sizing: border-box !important;
  }

  .wizard-result-prod-title {
    font-size: 0.88rem !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
    margin-bottom: 0.1rem !important;
    text-align: left !important;
    color: var(--color-slate-900) !important;
  }

  .wizard-result-price-row {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.45rem !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .wizard-result-price {
    font-size: 1.15rem !important;
    font-weight: 850 !important;
    color: var(--color-slate-900) !important;
    line-height: 1 !important;
  }

  .wizard-result-savings {
    font-size: 0.65rem !important;
    padding: 0.1rem 0.4rem !important;
    line-height: 1.2 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .wizard-result-extra-row {
    padding: 0.38rem 0.5rem !important;
    gap: 0.25rem !important;
    border-radius: 6px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    width: 100% !important;
    background: rgba(197, 168, 128, 0.08) !important;
    border: 1px solid rgba(197, 168, 128, 0.22) !important;
  }

  .wizard-result-stat {
    font-size: 0.7rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: var(--color-slate-800) !important;
  }

  .wizard-result-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.2rem !important;
    justify-content: flex-start !important;
    margin-bottom: 0 !important;
  }

  .wizard-result-chips .alm-spec-chip {
    font-size: 0.62rem !important;
    padding: 0.1rem 0.38rem !important;
    border-radius: var(--radius-pill) !important;
  }

  .wizard-result-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Compact ergonomic primary button */
  .wizard-result-actions .wizard-btn-primary {
    width: 100% !important;
    font-size: 0.8rem !important;
    font-weight: 750 !important;
    padding: 0.55rem 0.75rem !important;
    min-height: 38px !important;
    border-radius: var(--radius-pill) !important;
    justify-content: center !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }

  /* Compact secondary 2-column buttons */
  .wizard-result-subactions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .wizard-result-subactions .alm-btn {
    width: 100% !important;
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    padding: 0.42rem 0.35rem !important;
    min-height: 34px !important;
    justify-content: center !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .hud-beacon-node .beacon-label {
    display: none !important;
  }

  .hud-beacon-node {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
  }

  .hud-beacon-node .beacon-badge {
    display: inline-flex !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 0.65rem !important;
    align-items: center !important;
    justify-content: center !important;
  }
}

/* 7. Section 4 & 5: Collection Switcher & Bundles */
@media (max-width: 640px) {
  .product-collection-switcher {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto 1.25rem !important;
    padding: 0.25rem !important;
    gap: 0.35rem !important;
    border-radius: var(--radius-pill) !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.05) !important;
  }

  .collection-tab-btn {
    padding: 0.55rem 0.35rem !important;
    font-size: 0.72rem !important;
    width: 100% !important;
    min-width: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-pill) !important;
  }

  .collection-tab-btn .coll-label-full {
    display: none !important;
  }
  .collection-tab-btn .coll-label-short {
    display: inline !important;
  }

  .alm-carousel-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.25rem !important;
    margin-bottom: 0.25rem !important;
  }

  .alm-carousel-header h3 {
    font-size: 1.15rem !important;
    line-height: 1.25 !important;
    margin: 0.15rem 0 !important;
  }

  .alm-carousel-header p {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    margin: 0.1rem 0 0.25rem !important;
  }

  .alm-carousel-controls {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.75rem !important;
    width: 100% !important;
    margin: 0.2rem auto 0.25rem !important;
    padding: 0 !important;
  }

  .alm-carousel-wrapper {
    margin-bottom: 0 !important;
  }

  #vitrine {
    padding-bottom: 1.25rem !important;
  }

  #pakete {
    padding-top: 1.25rem !important;
  }

  .alm-carousel-arrow {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(197, 168, 128, 0.38) !important;
    color: var(--color-slate-800) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.05) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  .alm-carousel-arrow:active {
    background: #0E1524 !important;
    color: #C5A880 !important;
    border-color: #C5A880 !important;
    transform: scale(0.95) !important;
  }

  .carousel-swipe-hint {
    font-size: 0.65rem !important;
    color: var(--color-slate-500) !important;
    font-family: var(--font-mono) !important;
    letter-spacing: 0.03em !important;
    user-select: none !important;
    font-weight: 600 !important;
  }

  .bundles-grid-narrow {
    gap: 1rem !important;
  }

  .bundle-card-media {
    height: 175px !important;
  }

  .bundles-grid-narrow .col-4 {
    padding: 1.15rem 0.95rem !important;
  }

  .bundles-grid-narrow h3 {
    font-size: 1.05rem !important;
  }
}

/* Pelvic Bundles Interactive Switcher (Mobile/Tablet View) */
@media (max-width: 900px) {
  .bundle-tab-switcher {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 0.35rem !important;
    padding: 0.28rem !important;
    background: #0B1120 !important;
    border: 1px solid rgba(197, 168, 128, 0.28) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 4px 18px rgba(11, 17, 32, 0.14) !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto 1.5rem !important;
    box-sizing: border-box !important;
  }

  .bundle-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    padding: 0.55rem 0.45rem !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    border-radius: var(--radius-pill) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #94A3B8 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .bundle-tab-btn:hover {
    color: #F8FAFC !important;
  }

  .bundle-tab-btn.active {
    background: linear-gradient(135deg, #C5A880 0%, #A88658 100%) !important;
    color: #0E1524 !important;
    font-weight: 850 !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 4px 14px rgba(197, 168, 128, 0.35) !important;
  }

  .bundle-tab-label-short {
    display: none !important;
  }
  .bundle-tab-label-full {
    display: inline !important;
  }

  .bundle-card-tab-item {
    display: none !important;
  }

  .bundle-card-tab-item.active {
    display: flex !important;
    animation: fadeInBundle 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}

@keyframes fadeInBundle {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 420px) {
  .bundle-tab-label-full {
    display: none !important;
  }
  .bundle-tab-label-short {
    display: inline !important;
  }
  .bundle-tab-btn {
    padding: 0.5rem 0.2rem !important;
    font-size: 0.7rem !important;
    gap: 0.2rem !important;
  }
}

/* Brand Story & Manifest Interactive Switcher (Mobile/Tablet View) */
@media (max-width: 900px) {
  .manifest-tab-switcher {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem !important;
    padding: 0.28rem !important;
    background: #0B1120 !important;
    border: 1px solid rgba(197, 168, 128, 0.28) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 4px 18px rgba(11, 17, 32, 0.14) !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto 1.25rem !important;
    box-sizing: border-box !important;
  }

  .manifest-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    padding: 0.55rem 0.45rem !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    border-radius: var(--radius-pill) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #94A3B8 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .manifest-tab-btn:hover {
    color: #F8FAFC !important;
  }

  .manifest-tab-btn.active {
    background: linear-gradient(135deg, #C5A880 0%, #A88658 100%) !important;
    color: #0E1524 !important;
    font-weight: 850 !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 4px 14px rgba(197, 168, 128, 0.35) !important;
  }

  .manifest-tab-label-short {
    display: none !important;
  }
  .manifest-tab-label-full {
    display: inline !important;
  }

  .manifest-card-tab-item {
    display: none !important;
  }

  .manifest-card-tab-item.active {
    display: flex !important;
    animation: fadeInManifest 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  #manifest {
    padding: 1.75rem 0 !important;
  }
}

@keyframes fadeInManifest {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 420px) {
  .manifest-tab-label-full {
    display: none !important;
  }
  .manifest-tab-label-short {
    display: inline !important;
  }
  .manifest-tab-btn {
    padding: 0.5rem 0.2rem !important;
    font-size: 0.7rem !important;
    gap: 0.2rem !important;
  }
  .manifest-stats-row {
    gap: 0.35rem !important;
    padding-top: 0.85rem !important;
    margin-top: 0.95rem !important;
  }
  .manifest-stat-pill {
    padding: 0.45rem 0.25rem !important;
  }
  .manifest-stat-pill .stat-num {
    font-size: 0.92rem !important;
  }
  .manifest-stat-pill .stat-desc {
    font-size: 0.58rem !important;
  }
  .manifest-telemetry-box {
    padding: 0.55rem 0.5rem !important;
    gap: 0.35rem !important;
  }
  .telemetry-bar-item .tel-val {
    font-size: 0.92rem !important;
  }
}

/* Medical & Engineering Board Interactive Switcher (Mobile/Tablet View) */
@media (max-width: 900px) {
  .expert-tab-switcher {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem !important;
    padding: 0.28rem !important;
    background: #0B1120 !important;
    border: 1px solid rgba(197, 168, 128, 0.28) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 4px 18px rgba(11, 17, 32, 0.14) !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto 1.25rem !important;
    box-sizing: border-box !important;
  }

  .expert-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    padding: 0.55rem 0.45rem !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    border-radius: var(--radius-pill) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #94A3B8 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .expert-tab-btn:hover {
    color: #F8FAFC !important;
  }

  .expert-tab-btn.active {
    background: linear-gradient(135deg, #C5A880 0%, #A88658 100%) !important;
    color: #0E1524 !important;
    font-weight: 850 !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 4px 14px rgba(197, 168, 128, 0.35) !important;
  }

  .expert-tab-label-short {
    display: none !important;
  }
  .expert-tab-label-full {
    display: inline !important;
  }

  .expert-card-tab-item {
    display: none !important;
  }

  .expert-card-tab-item.active {
    display: flex !important;
    animation: fadeInExpert 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  #experten {
    padding: 1.75rem 0 !important;
  }
}

@keyframes fadeInExpert {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 420px) {
  .expert-tab-label-full {
    display: none !important;
  }
  .expert-tab-label-short {
    display: inline !important;
  }
  .expert-tab-btn {
    padding: 0.5rem 0.2rem !important;
    font-size: 0.7rem !important;
    gap: 0.2rem !important;
  }
  .expert-key-statement {
    padding: 0.55rem 0.65rem !important;
    font-size: 0.74rem !important;
  }
}

/* Fachjournal Interactive Switcher (Mobile/Tablet View) */
@media (max-width: 900px) {
  .journal-tab-switcher {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.35rem !important;
    padding: 0.28rem !important;
    background: #0B1120 !important;
    border: 1px solid rgba(197, 168, 128, 0.28) !important;
    border-radius: var(--radius-pill) !important;
    box-shadow: 0 4px 18px rgba(11, 17, 32, 0.14) !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto 1.15rem !important;
    box-sizing: border-box !important;
  }

  .journal-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    padding: 0.55rem 0.45rem !important;
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    border-radius: var(--radius-pill) !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #94A3B8 !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .journal-tab-btn:hover {
    color: #F8FAFC !important;
  }

  .journal-tab-btn.active {
    background: linear-gradient(135deg, #C5A880 0%, #A88658 100%) !important;
    color: #0E1524 !important;
    font-weight: 850 !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    box-shadow: 0 4px 14px rgba(197, 168, 128, 0.35) !important;
  }

  .journal-tab-label-short {
    display: none !important;
  }
  .journal-tab-label-full {
    display: inline !important;
  }

  .journal-card-tab-item {
    display: none !important;
  }

  .journal-card-tab-item.active {
    display: flex !important;
    animation: fadeInJournal 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  #journal {
    padding-top: 1rem !important;
    padding-bottom: 2.25rem !important;
  }

  .journal-section-header {
    margin-bottom: 1.15rem !important;
    text-align: center !important;
    justify-content: center !important;
  }

  .journal-section-title {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    margin-top: 0.25rem !important;
  }

  .journal-all-btn {
    font-size: 0.8rem !important;
    padding: 0.55rem 1rem !important;
    width: 100% !important;
    text-align: center !important;
    margin-top: 0.5rem !important;
  }

  #journal .bento-card {
    padding: 1.15rem 0.95rem !important;
    border-radius: var(--radius-lg) !important;
  }

  .journal-img-wrapper {
    height: 155px !important;
    margin-bottom: 0.75rem !important;
  }

  .journal-card-title {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.35rem !important;
  }

  .journal-card-author {
    font-size: 0.72rem !important;
    margin-bottom: 0.45rem !important;
    line-height: 1.35 !important;
  }

  .journal-card-desc {
    font-size: 0.8rem !important;
    line-height: 1.48 !important;
    margin-bottom: 0.85rem !important;
  }

  .journal-card-action .alm-btn {
    width: 100% !important;
    text-align: center !important;
    font-size: 0.82rem !important;
    padding: 0.65rem 0.85rem !important;
  }

  .journal-card-top-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 0.5rem !important;
    width: 100% !important;
    margin-bottom: 0.75rem !important;
  }

  .badge-text-full {
    display: none !important;
  }
  .badge-text-short {
    display: inline !important;
  }

  .journal-card-badge {
    font-size: 0.62rem !important;
    padding: 0.18rem 0.5rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: calc(100% - 90px) !important;
    flex-shrink: 1 !important;
  }

  .journal-dossier-tag {
    font-family: var(--font-mono) !important;
    font-size: 0.72rem !important;
    color: var(--color-slate-400) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }
}

@keyframes fadeInJournal {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 440px) {
  .journal-tab-label-full {
    display: none !important;
  }
  .journal-tab-label-short {
    display: inline !important;
  }
  .journal-tab-btn {
    padding: 0.5rem 0.2rem !important;
    font-size: 0.7rem !important;
    gap: 0.2rem !important;
  }
}

/* 8. Sections 6, 7, 8, 9, 10: Story, Experts, Logistics, Journal, FAQ */
@media (max-width: 640px) {
  #manifest .col-7,
  #manifest .col-5 {
    padding: 1.25rem 1.05rem !important;
    border-radius: var(--radius-lg) !important;
  }

  #manifest h2 {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.75rem !important;
  }

  #manifest h3 {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.75rem !important;
  }

  #manifest p {
    font-size: 0.82rem !important;
    line-height: 1.52 !important;
  }

  #experten .col-6 {
    padding: 1.25rem 1.05rem !important;
    border-radius: var(--radius-lg) !important;
  }

  #experten .bento-card > div:first-child {
    gap: 0.85rem !important;
    margin-bottom: 0.85rem !important;
  }

  #experten img {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
  }

  #experten h3 {
    font-size: 1.1rem !important;
    line-height: 1.25 !important;
  }

  #experten p {
    font-size: 0.82rem !important;
    line-height: 1.55 !important;
  }

  #logistik .bento-card {
    padding: 1.25rem 1rem !important;
  }

  #logistik .col-5 > div {
    height: 200px !important;
  }

  #journal .col-6 {
    padding: 1.15rem 0.95rem !important;
  }

  #journal .col-6 img {
    height: 145px !important;
  }

  #journal h3 {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
  }

  /* FAQ Module Spacing & Accordion Mobile */
  #faq {
    padding: 2rem 0 2.25rem !important;
  }

  #faq .alm-container > div:first-child {
    margin-bottom: 1.25rem !important;
  }

  #faq h2 {
    font-size: 1.35rem !important;
    margin: 0.35rem 0 !important;
  }

  #faq p {
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
  }

  .alm-faq-item {
    margin-bottom: 0.5rem !important;
    border-radius: var(--radius-sm) !important;
  }

  .alm-faq-header {
    padding: 0.8rem 0.85rem !important;
    gap: 0.65rem !important;
  }

  .alm-faq-question {
    font-size: 0.84rem !important;
    line-height: 1.35 !important;
    align-items: flex-start !important;
    gap: 0.55rem !important;
  }

  .alm-faq-num,
  .alm-faq-question > span:first-child {
    font-size: 0.82rem !important;
    min-width: 24px !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    letter-spacing: normal !important;
  }

  .alm-faq-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    min-height: 26px !important;
  }

  .alm-faq-icon svg {
    width: 12px !important;
    height: 12px !important;
  }

  .alm-faq-body {
    max-height: 0 !important;
    padding: 0 0.85rem !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    border: none !important;
    transition: max-height 0.3s cubic-bezier(0.16, 1, 0.3, 1), padding 0.25s ease, opacity 0.2s ease !important;
  }

  .alm-faq-item.active .alm-faq-body {
    max-height: 800px !important;
    padding: 0.25rem 0.85rem 0.95rem !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Section Buttons */
  .experten-more-btn {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    text-align: center !important;
    font-size: 0.82rem !important;
    padding: 0.65rem 0.85rem !important;
    line-height: 1.35 !important;
    box-sizing: border-box !important;
  }

  #logistik .alm-btn,
  #journal .alm-btn {
    max-width: 100% !important;
    white-space: normal !important;
    word-break: break-word !important;
    box-sizing: border-box !important;
  }
}

/* ==========================================================================
   MOBILE FOOTER COMPACTNESS & ACCORDION SYSTEM (UP TO 768PX)
   ========================================================================== */
@media (max-width: 768px) {
  .alm-footer {
    padding: 1.5rem 0 1rem !important;
  }

  /* Compact 2x2 Trust Strip */
  .alm-footer-trust-strip {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    padding-bottom: 0.85rem !important;
    margin-bottom: 1rem !important;
  }

  .alm-footer-trust-item {
    padding: 0.55rem 0.6rem !important;
    border-radius: 8px !important;
    gap: 0.45rem !important;
    background: rgba(14, 21, 36, 0.6) !important;
  }

  .alm-footer-trust-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  .alm-footer-trust-icon svg {
    width: 14px !important;
    height: 14px !important;
  }

  .alm-footer-trust-content h4 {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    margin-bottom: 0.15rem !important;
    font-weight: 750 !important;
  }

  .alm-footer-trust-content p {
    font-size: 0.62rem !important;
    line-height: 1.25 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    color: #94A3B8 !important;
  }

  /* Compact Newsletter Card */
  .alm-footer-newsletter-card {
    padding: 0.95rem 0.85rem !important;
    margin-bottom: 1.15rem !important;
    gap: 0.75rem !important;
    border-radius: 10px !important;
  }

  .alm-footer-newsletter-title {
    font-size: 0.96rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.2rem !important;
  }

  .alm-footer-newsletter-desc {
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.45rem !important;
  }

  .alm-footer-input-group {
    padding: 0.25rem !important;
    border-radius: 8px !important;
    gap: 0.35rem !important;
  }

  .alm-footer-input {
    font-size: 0.76rem !important;
    padding: 0.45rem 0.65rem !important;
  }

  .alm-footer-submit-btn {
    font-size: 0.76rem !important;
    padding: 0.5rem 0.85rem !important;
  }

  .alm-footer-newsletter-privacy {
    font-size: 0.64rem !important;
    margin-top: 0.3rem !important;
  }

  /* Compact Brand & Contact Box */
  .alm-footer-main-grid {
    gap: 0.85rem !important;
    padding-bottom: 1rem !important;
  }

  .alm-footer-brand-desc {
    font-size: 0.72rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.65rem !important;
    color: #94A3B8 !important;
  }

  .alm-footer-contact-card {
    padding: 0.65rem 0.75rem !important;
    border-radius: 8px !important;
    gap: 0.45rem !important;
  }

  .alm-footer-contact-row {
    gap: 0.45rem !important;
    margin-bottom: 0.35rem !important;
  }

  .alm-contact-label {
    font-size: 0.62rem !important;
  }

  .alm-contact-value {
    font-size: 0.74rem !important;
  }

  .alm-contact-sub {
    font-size: 0.6rem !important;
  }

  .alm-contact-text {
    font-size: 0.66rem !important;
    line-height: 1.3 !important;
  }

  .alm-footer-status-indicator {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.66rem !important;
    margin-top: 0.5rem !important;
  }

  /* Accordion Column Headers */
  .alm-footer-col:not(.alm-footer-col-brand) {
    margin-bottom: 0.25rem !important;
  }

  .alm-footer-heading {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.6rem 0.35rem !important;
    margin-bottom: 0 !important;
    font-size: 0.82rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .alm-footer-heading span {
    font-weight: 750 !important;
    color: #F8FAFC !important;
  }

  .alm-footer-toggle-icon {
    display: inline-block !important;
    transition: transform 0.22s ease !important;
    color: #94A3B8 !important;
    transform: rotate(-90deg) !important;
  }

  /* Default collapsed links state on mobile */
  .alm-footer-col:not(.alm-footer-col-brand) .alm-footer-links {
    display: none !important;
  }

  /* Expanded links state */
  .alm-footer-col:not(.alm-footer-col-brand).open .alm-footer-links,
  .alm-footer-col:not(.alm-footer-col-brand).expanded .alm-footer-links,
  .alm-footer-col:not(.alm-footer-col-brand):not(.collapsed) .alm-footer-links {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    padding: 0.5rem 0.35rem 0.75rem !important;
    animation: fadeInFooterLinks 0.22s ease-out !important;
  }

  .alm-footer-col:not(.alm-footer-col-brand).open .alm-footer-toggle-icon,
  .alm-footer-col:not(.alm-footer-col-brand).expanded .alm-footer-toggle-icon,
  .alm-footer-col:not(.alm-footer-col-brand):not(.collapsed) .alm-footer-toggle-icon {
    transform: rotate(0deg) !important;
    color: #C5A880 !important;
  }

  .alm-footer-links li a {
    min-height: 28px !important;
    font-size: 0.74rem !important;
    padding: 0.15rem 0 !important;
    color: #94A3B8 !important;
  }

  .alm-footer-headquarters-mini {
    margin-top: 0.65rem !important;
    padding: 0.55rem 0.65rem !important;
    font-size: 0.64rem !important;
    line-height: 1.35 !important;
    border-radius: 6px !important;
  }

  /* Trust Badges Strip */
  .alm-footer-badges-strip {
    padding: 0.75rem 0 !important;
    gap: 0.6rem !important;
  }

  .alm-badge-group-title {
    font-size: 0.66rem !important;
    margin-bottom: 0.3rem !important;
  }

  .alm-badge-chips {
    gap: 0.3rem !important;
  }

  .alm-badge-chip {
    font-size: 0.64rem !important;
    padding: 0.18rem 0.45rem !important;
    border-radius: 4px !important;
  }

  /* Disclaimer Box */
  .alm-footer-disclaimer-box {
    padding: 0.65rem 0.75rem !important;
    margin-top: 0.65rem !important;
    border-radius: 8px !important;
  }

  .alm-disclaimer-header {
    font-size: 0.66rem !important;
    margin-bottom: 0.2rem !important;
  }

  .alm-disclaimer-text {
    font-size: 0.62rem !important;
    line-height: 1.38 !important;
    color: #94A3B8 !important;
  }

  /* Bottom Bar */
  .alm-footer-bottom-bar {
    padding-top: 0.75rem !important;
    font-size: 0.66rem !important;
    gap: 0.5rem !important;
  }

  @keyframes fadeInFooterLinks {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* ==========================================================================
   DISCREET PACKAGING CARD & BUTTON (RESPONSIVE STAGE)
   ========================================================================== */
.discreet-card-btn {
  white-space: nowrap !important;
  word-break: keep-all !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.4rem !important;
}

.discreet-box-media {
  width: 100%;
  max-width: 440px;
  height: 250px;
  background: radial-gradient(circle at 50% 50%, #172033 0%, #0a0f1a 100%);
  border-radius: 12px;
  border: 1px solid rgba(197, 168, 128, 0.28);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
}

.discreet-box-badge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 15, 26, 0.92) 100%);
  padding: 1.25rem 0.85rem 0.65rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #C5A880;
  font-weight: 700;
}

@media (max-width: 768px) {
  .discreet-card-btn {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.82rem !important;
    padding: 0.65rem 0.85rem !important;
    white-space: normal !important;
    text-wrap: balance !important;
    box-sizing: border-box !important;
  }

  .discreet-box-media {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    max-height: 205px !important;
    margin-top: 1.25rem !important;
  }

  .discreet-box-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center 38% !important;
    display: block !important;
  }

  .discreet-showcase-photo {
    min-height: 220px !important;
    height: 220px !important;
  }
}

/* ==========================================================================
   Subpages Adaptive Mobile Ergonomics & Space Optimization
   ========================================================================== */

/* Universal price nowrap guarantee */
.alm-product-price,
.bundle-card-price,
.price-val,
.hud-price,
.alm-detail-current-price,
.wizard-result-price {
  white-space: nowrap !important;
}

/* Global subpage compact spacing on mobile */
@media (max-width: 640px) {
  .alm-section {
    padding-top: 1.25rem !important;
    padding-bottom: 2rem !important;
  }
  .alm-section h1 {
    font-size: clamp(1.35rem, 5.2vw, 1.85rem) !important;
    line-height: 1.25 !important;
  }
  .alm-section .bento-card {
    padding: 1.15rem 1rem !important;
    border-radius: var(--radius-md) !important;
  }
}

/* 1. Katalog Mobile Filter Bar & Product Spacing */
@media (max-width: 768px) {
  .catalog-controls-card {
    padding: 0.85rem 0.75rem !important;
    margin-bottom: 1.25rem !important;
    border-radius: var(--radius-lg) !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(197, 168, 128, 0.3) !important;
    box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .catalog-controls-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .catalog-filters-rail {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    scroll-behavior: smooth !important;
    gap: 0.45rem !important;
    padding: 0.2rem 0.25rem 0.45rem 0.25rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    scrollbar-width: none !important;
  }
  .catalog-filters-rail::-webkit-scrollbar {
    display: none !important;
  }
  .catalog-filters-rail .catalog-filter-chip,
  .catalog-filter-chip {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 0.8rem !important;
    font-weight: 650 !important;
    padding: 0.45rem 0.95rem !important;
    height: 38px !important;
    min-height: 38px !important;
    min-width: max-content !important;
    border-radius: var(--radius-pill) !important;
    box-sizing: border-box !important;
    user-select: none !important;
    transition: all 0.2s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(197, 168, 128, 0.35) !important;
    color: var(--color-slate-700) !important;
  }
  .catalog-filters-rail .catalog-filter-chip.active,
  .catalog-filter-chip.active {
    background: linear-gradient(135deg, #B59364 0%, #8C6738 100%) !important;
    color: #FFFFFF !important;
    border-color: #8C6738 !important;
    box-shadow: 0 3px 10px rgba(140, 103, 56, 0.32) !important;
    font-weight: 750 !important;
  }
  .catalog-sort-box {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.65rem !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid rgba(15, 23, 42, 0.06) !important;
    box-sizing: border-box !important;
  }
  .catalog-sort-box label {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: var(--color-slate-700) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }
  .catalog-sort-box select {
    flex: 1 !important;
    min-width: 0 !important;
    height: 38px !important;
    font-size: 0.8rem !important;
    border-radius: var(--radius-pill) !important;
    padding: 0 0.85rem !important;
    border: 1px solid rgba(197, 168, 128, 0.4) !important;
    background: #FFFFFF !important;
    color: var(--color-slate-900) !important;
    font-weight: 600 !important;
    box-sizing: border-box !important;
  }

  /* Active Filter Bar (Compact & Sleek) */
  .catalog-active-filter-bar {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.5rem !important;
    background: rgba(197, 168, 128, 0.08) !important;
    border: 1px solid rgba(197, 168, 128, 0.28) !important;
    border-radius: var(--radius-pill) !important;
    padding: 0.35rem 0.65rem 0.35rem 0.85rem !important;
    margin-bottom: 0.65rem !important;
    font-size: 0.76rem !important;
    color: var(--color-slate-800) !important;
    box-sizing: border-box !important;
  }
  .catalog-active-filter-bar .filter-bar-info {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    min-width: 0 !important;
  }
  .catalog-active-filter-bar .filter-dot {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    background: var(--color-cyber-dark) !important;
    flex-shrink: 0 !important;
  }
  .catalog-active-filter-bar .filter-label {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .catalog-active-filter-bar .filter-query {
    color: var(--color-cyber-dark) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }
  .catalog-active-filter-bar .filter-count-badge {
    font-family: var(--font-mono) !important;
    font-size: 0.68rem !important;
    color: #8C6D3B !important;
    background: rgba(197, 168, 128, 0.22) !important;
    padding: 0.1rem 0.4rem !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    margin-left: 0.2rem !important;
    font-weight: 750 !important;
  }
  .catalog-active-filter-bar .filter-reset-pill {
    flex-shrink: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(197, 168, 128, 0.45) !important;
    color: var(--color-slate-700) !important;
    font-size: 0.7rem !important;
    font-weight: 750 !important;
    padding: 0.22rem 0.6rem !important;
    border-radius: var(--radius-pill) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: all 0.2s ease !important;
  }
  .catalog-active-filter-bar .filter-reset-pill:hover,
  .catalog-active-filter-bar .filter-reset-pill:active {
    background: var(--color-cyber-dark) !important;
    color: #FFFFFF !important;
    border-color: var(--color-cyber-dark) !important;
  }
}

/* 2. Produkt-Ansicht High-Converting Mobile UX & Reordered Flow */
@media (max-width: 768px) {
  body.has-detail-sticky-bar {
    padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Compact section padding to eliminate dead top/bottom space */
  .alm-product-detail-section,
  section.alm-section:has(#productDetailWrapper),
  .alm-section:has(#productDetailWrapper) {
    padding-top: 0.5rem !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  #productDetailWrapper {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0.65rem !important;
    padding-right: 0.65rem !important;
    padding-top: 0 !important;
    padding-bottom: 0.35rem !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }

  .alm-detail-top-nav {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.35rem !important;
    margin-bottom: 0.65rem !important;
    width: 100% !important;
  }

  .alm-detail-top-nav .alm-back-link {
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--color-slate-600) !important;
    margin-bottom: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }

  .alm-detail-top-nav .alm-detail-breadcrumb {
    font-size: 0.72rem !important;
    color: var(--color-slate-500) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
    flex-wrap: wrap !important;
  }

  .alm-detail-layout-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ORDER 1: Title, Subtitle, Rating & Badges (Prominently at the top on mobile) */
  .alm-detail-header-card {
    order: 1 !important;
    margin-bottom: 0.2rem !important;
    background: transparent !important;
    padding: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-detail-meta-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    margin-bottom: 0.35rem !important;
    flex-wrap: wrap !important;
  }

  .alm-detail-title {
    font-size: 1.25rem !important;
    line-height: 1.25 !important;
    font-weight: 850 !important;
    margin-bottom: 0.2rem !important;
    letter-spacing: -0.01em !important;
    color: var(--color-slate-950) !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .alm-detail-subtitle {
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.35rem !important;
    color: var(--color-slate-600) !important;
  }

  .alm-detail-reviews-row {
    font-size: 0.72rem !important;
    gap: 0.3rem !important;
    margin-bottom: 0.35rem !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
  }

  /* ORDER 2: Product Visual Showcase Card (Golden ratio, no dead void) */
  .alm-detail-gallery-card {
    order: 2 !important;
    padding: 0 !important;
    margin-bottom: 0.25rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: static !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-detail-media-container {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    min-height: auto !important;
    max-height: min(88vw, 380px) !important;
    padding: 0 !important;
    border-radius: var(--radius-lg) !important;
    background: #0E1524 !important;
    border: 1px solid rgba(197, 168, 128, 0.35) !important;
    box-shadow: 0 6px 22px rgba(10, 15, 26, 0.25) !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .alm-detail-main-img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    border-radius: 0 !important;
  }

  .alm-detail-media-top-bar {
    position: absolute !important;
    top: 0.65rem !important;
    left: 0.65rem !important;
    right: 0.65rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
    z-index: 5 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    max-width: calc(100% - 1.3rem) !important;
  }

  .alm-detail-media-top-bar .alm-badge,
  .alm-detail-media-top-bar .alm-badge-cyber {
    max-width: 65% !important;
    min-width: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 0.62rem !important;
    font-weight: 750 !important;
    padding: 0.22rem 0.65rem !important;
    flex-shrink: 1 !important;
    border-radius: var(--radius-pill) !important;
    pointer-events: auto !important;
    background: rgba(8, 12, 22, 0.92) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(197, 168, 128, 0.5) !important;
    color: #FAF4EB !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    letter-spacing: 0.03em !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  .alm-detail-media-top-bar .alm-detail-sku-badge {
    font-family: var(--font-mono) !important;
    font-size: 0.64rem !important;
    font-weight: 800 !important;
    padding: 0.22rem 0.6rem !important;
    background: rgba(8, 12, 22, 0.92) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(197, 168, 128, 0.5) !important;
    color: #E5C396 !important;
    border-radius: var(--radius-sm, 6px) !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    pointer-events: auto !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    letter-spacing: 0.04em !important;
  }

  .alm-detail-media-caption {
    position: absolute !important;
    bottom: 0.65rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: auto !important;
    max-width: calc(100% - 1.2rem) !important;
    background: rgba(8, 12, 22, 0.92) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(197, 168, 128, 0.45) !important;
    border-radius: var(--radius-pill) !important;
    padding: 0.25rem 0.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    font-size: clamp(0.52rem, 2.5vw, 0.62rem) !important;
    font-family: var(--font-sans) !important;
    font-weight: 750 !important;
    color: #FAF4EB !important;
    letter-spacing: 0.02em !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
    z-index: 5 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .alm-detail-media-caption .radar-beacon {
    width: 6px !important;
    height: 6px !important;
    min-width: 6px !important;
    min-height: 6px !important;
    margin: 0 0.3rem 0 0 !important;
    background-color: #10B981 !important;
    flex-shrink: 0 !important;
    border-radius: 50% !important;
    box-shadow: 0 0 6px rgba(16, 185, 129, 0.8) !important;
    border: none !important;
    display: inline-block !important;
  }

  .alm-detail-media-caption .radar-beacon::after {
    display: none !important;
  }

  .alm-detail-media-caption .caption-text,
  .alm-detail-media-caption span:not(.radar-beacon) {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    display: inline-block !important;
  }

  /* ORDER 3: Purchase Card (Dedicated Price Box, Size & Tiers) */
  .alm-detail-info-card {
    order: 3 !important;
    padding: 0.85rem 0.75rem !important;
    border-radius: var(--radius-lg) !important;
    background: #ffffff !important;
    border: 1px solid rgba(197, 168, 128, 0.3) !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-detail-price-box {
    background: #0E1524 !important;
    border: 1px solid rgba(197, 168, 128, 0.35) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.85rem 0.85rem 0.75rem !important;
    margin-bottom: 0.75rem !important;
    color: #FAF4EB !important;
    box-shadow: 0 6px 18px rgba(10, 15, 26, 0.28) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-detail-price-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
    margin-bottom: 0.35rem !important;
  }

  .alm-detail-price-left {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.45rem !important;
  }

  .alm-detail-current-price {
    font-family: var(--font-mono) !important;
    font-size: 1.55rem !important;
    font-weight: 850 !important;
    color: #FAF4EB !important;
    line-height: 1 !important;
  }

  .alm-detail-strike-price {
    font-size: 0.85rem !important;
    color: #94A3B8 !important;
    text-decoration: line-through !important;
    font-family: var(--font-mono) !important;
  }

  .alm-detail-savings-badge {
    font-family: var(--font-mono) !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    padding: 0.2rem 0.5rem !important;
    background: #10B981 !important;
    color: #ffffff !important;
    border-radius: var(--radius-pill) !important;
    white-space: nowrap !important;
  }

  .alm-detail-price-perks {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    padding-top: 0.45rem !important;
    margin-top: 0.35rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-price-perk-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-size: 0.72rem !important;
    color: #CBD5E1 !important;
    line-height: 1.25 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }

  .alm-price-perk-item .perk-check {
    color: #10B981 !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    flex-shrink: 0 !important;
  }

  .alm-price-perk-item .perk-icon {
    font-size: 0.72rem !important;
    flex-shrink: 0 !important;
  }

  .alm-detail-variant-group {
    background: var(--color-slate-50) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.65rem 0.6rem !important;
    margin-bottom: 0.65rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-detail-variant-label {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: var(--color-slate-800) !important;
    margin-bottom: 0.4rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    gap: 0.4rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-detail-size-link {
    font-size: 0.7rem !important;
    font-weight: 750 !important;
    color: #8C6738 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.2rem !important;
    white-space: nowrap !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
  }

  .alm-detail-variant-chips {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-detail-variant-chip {
    flex: 1 1 calc(20% - 0.25rem) !important;
    min-width: 42px !important;
    max-width: 100% !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0.25rem 0.3rem !important;
    font-size: 0.72rem !important;
    font-weight: 750 !important;
    border-radius: var(--radius-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .alm-detail-variant-hint {
    font-size: 0.66rem !important;
    color: var(--color-slate-500) !important;
    margin-top: 0.35rem !important;
    line-height: 1.35 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-detail-tier-section {
    margin-bottom: 0.65rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-detail-tier-headline {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.15rem !important;
    margin-bottom: 0.45rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-detail-tier-headline > span:first-child {
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    color: var(--color-slate-800) !important;
    letter-spacing: 0.02em !important;
  }

  .alm-detail-tier-headline .tier-tip {
    font-size: 0.65rem !important;
    color: #8C6738 !important;
    font-weight: 700 !important;
  }

  /* Multi-tier Pack Selection (Guaranteed Non-Overlapping In-Flow Cards) */
  .alm-tier-selector {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.35rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-tier-option {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.45rem 0.2rem 0.35rem !important;
    border-radius: 8px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    min-height: 74px !important;
    background: #FAF8F5 !important;
    border: 1px solid rgba(197, 168, 128, 0.3) !important;
    cursor: pointer !important;
  }

  .alm-tier-option.active {
    background: #FAF4EB !important;
    border-color: #8C6738 !important;
    box-shadow: 0 0 0 1.5px #8C6738, 0 3px 8px rgba(140, 103, 56, 0.16) !important;
  }

  .alm-tier-tag-pill {
    font-family: var(--font-mono) !important;
    font-size: 0.52rem !important;
    font-weight: 800 !important;
    padding: 0.1rem 0.3rem !important;
    border-radius: var(--radius-pill) !important;
    background: rgba(14, 21, 36, 0.08) !important;
    color: var(--color-slate-600) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    display: inline-block !important;
    margin-bottom: 0.15rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .alm-tier-tag-pill.tag-sale {
    background: rgba(197, 168, 128, 0.22) !important;
    color: #8C6738 !important;
    border: 1px solid rgba(197, 168, 128, 0.45) !important;
  }

  .alm-tier-tag-pill.tag-top {
    background: #10B981 !important;
    color: #FFFFFF !important;
  }

  .alm-tier-option.active .alm-tier-tag-pill.tag-sale {
    background: #C5A880 !important;
    color: #0E1524 !important;
  }

  .alm-tier-title {
    font-size: 0.68rem !important;
    font-weight: 750 !important;
    color: var(--color-slate-900) !important;
    line-height: 1.15 !important;
    margin-bottom: 0.1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .alm-tier-price {
    font-family: var(--font-mono) !important;
    font-size: 0.74rem !important;
    font-weight: 850 !important;
    color: var(--color-slate-900) !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .alm-tier-price .unit-note {
    font-size: 0.54rem !important;
    color: var(--color-slate-500) !important;
    font-weight: 600 !important;
  }

  .alm-tier-subline {
    font-size: 0.55rem !important;
    color: var(--color-slate-500) !important;
    line-height: 1.15 !important;
    margin-top: 0.1rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .alm-tier-subline.save-highlight {
    color: #10B981 !important;
    font-weight: 800 !important;
  }

  .alm-detail-actions-bar {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    margin: 0.75rem 0 0.45rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .alm-detail-qty-stepper {
    height: 46px !important;
    width: 70px !important;
    min-width: 70px !important;
    max-width: 70px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    border: 1.5px solid rgba(197, 168, 128, 0.35) !important;
    background: #F8FAFC !important;
    box-sizing: border-box !important;
  }

  .alm-qty-step-btn {
    width: 23px !important;
    font-size: 1.05rem !important;
    padding: 0 !important;
    color: var(--color-slate-800) !important;
  }

  .alm-qty-step-value {
    font-size: 0.92rem !important;
    font-weight: 850 !important;
    min-width: 24px !important;
    color: var(--color-slate-950) !important;
  }

  .alm-detail-cta-btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    font-size: clamp(0.76rem, 2.5vw, 0.86rem) !important;
    font-weight: 800 !important;
    padding: 0 0.65rem !important;
    border-radius: 10px !important;
    background: linear-gradient(135deg, #8E6B3E 0%, #76552B 100%) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    box-shadow: 0 3px 12px rgba(118, 85, 43, 0.3) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    box-sizing: border-box !important;
    letter-spacing: -0.01em !important;
    transition: all 0.2s ease !important;
  }

  .alm-detail-cta-btn:active {
    background: linear-gradient(135deg, #7C5B2F 0%, #63451F 100%) !important;
    color: #FFFFFF !important;
    transform: scale(0.98) !important;
  }

  .alm-detail-cta-btn svg {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    flex-shrink: 0 !important;
    color: #FFFFFF !important;
    stroke: #FFFFFF !important;
  }

  .detail-cta-label-full {
    display: none !important;
  }

  .detail-cta-label-short {
    display: inline !important;
    white-space: nowrap !important;
  }

  .alm-detail-wishlist-action-btn {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    border: 1.5px solid rgba(197, 168, 128, 0.35) !important;
    background: #FFFFFF !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
  }

  .alm-detail-wishlist-action-btn svg {
    width: 20px !important;
    height: 20px !important;
  }

  .alm-detail-stock-row {
    font-size: 0.7rem !important;
    line-height: 1.35 !important;
    padding: 0.35rem 0.15rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* ORDER 4: Trust Guarantees (2 Columns in Mobile Mode) */
  .alm-detail-trust-cards {
    order: 4 !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.45rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0.4rem 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .alm-detail-trust-item {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.45rem !important;
    padding: 0.55rem 0.6rem !important;
    border-radius: var(--radius-sm, 8px) !important;
    background: #ffffff !important;
    border: 1px solid rgba(197, 168, 128, 0.28) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
  }

  .alm-detail-trust-item:last-child:nth-child(odd) {
    grid-column: 1 / -1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    padding: 0.55rem 0.75rem !important;
  }

  .alm-detail-trust-icon {
    font-size: 1.15rem !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }

  .alm-detail-trust-text {
    flex: 1 !important;
    min-width: 0 !important;
  }

  .alm-detail-trust-text strong {
    font-size: 0.72rem !important;
    font-weight: 750 !important;
    margin-bottom: 0.1rem !important;
    color: var(--color-slate-900) !important;
    display: block !important;
    line-height: 1.25 !important;
  }

  .alm-detail-trust-text small {
    font-size: 0.62rem !important;
    line-height: 1.25 !important;
    color: var(--color-slate-500) !important;
    display: block !important;
  }

  /* ORDER 5: Accordions for Clinical & Technical Details */
  .alm-detail-accordions {
    order: 5 !important;
    margin-top: 0.35rem !important;
    margin-bottom: 0.35rem !important;
    width: 100% !important;
  }

  .alm-accordion-header {
    padding: 0.75rem 0.85rem !important;
    font-size: 0.82rem !important;
  }

  .alm-accordion-content {
    padding: 0.85rem !important;
    font-size: 0.8rem !important;
  }

  /* Sticky Bottom Buy Bar (Always on top of everything) */
  .alm-mobile-detail-sticky-bar {
    display: flex !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    background: rgba(14, 21, 36, 0.97) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-top: 1.5px solid rgba(197, 168, 128, 0.4) !important;
    padding: 0.65rem 0.95rem calc(0.65rem + env(safe-area-inset-bottom, 0px)) !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.75rem !important;
    box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.4) !important;
  }

  .sticky-bar-info {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  .sticky-bar-title {
    font-size: 0.74rem !important;
    font-weight: 700 !important;
    color: #FAF4EB !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .sticky-bar-price {
    font-family: var(--font-mono) !important;
    font-size: 1.15rem !important;
    font-weight: 850 !important;
    color: #C5A880 !important;
    line-height: 1.2 !important;
  }

  .sticky-bar-btn {
    min-height: 44px !important;
    height: 44px !important;
    padding: 0 1.1rem !important;
    font-size: 0.84rem !important;
    font-weight: 800 !important;
    border-radius: var(--radius-pill) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    box-shadow: 0 4px 14px rgba(197, 168, 128, 0.3) !important;
  }
}

/* 4. Warenkorb & Kasse Mobile Summary & Form */
@media (max-width: 768px) {
  .cart-summary-card {
    position: static !important;
    padding: 1.15rem 1rem !important;
    margin-top: 1rem !important;
  }
}

@media (max-width: 480px) {
  .alm-form-row-responsive {
    grid-template-columns: 1fr !important;
  }
}

/* ==========================================================================
   GLOBAL MOBILE TOUCH, FOCUS & TYPOGRAPHY ERGONOMICS
   ========================================================================== */
button,
a,
input,
select,
.hero-toggle-btn,
.alm-hud-pill,


.catalog-filter-chip {
  -webkit-tap-highlight-color: transparent !important;
}

button:focus,
a:focus,
.hero-toggle-btn:focus,
.alm-hud-pill:focus,
.catalog-filter-chip:focus {
  outline: none !important;
}

button:focus-visible,
a:focus-visible,
.hero-toggle-btn:focus-visible,
.alm-hud-pill:focus-visible,
.catalog-filter-chip:focus-visible {
  outline: 2px solid var(--color-bronze-primary, #C5A880) !important;
  outline-offset: 2px !important;
}

.alm-product-card-title,
.alm-product-title,
.alm-card-title,
.alm-detail-title,
.journal-card-title,
.journal-card-title a {
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

#heroPressureValDisplay {
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* ==========================================================================
   STANDALONE DOSSIER ARTICLE PAGES (COMPACT & MODERN UI/UX)
   ========================================================================== */
.alm-article-section {
  padding-top: 1.25rem !important;
  padding-bottom: 2.75rem !important;
}

.alm-article-container {
  max-width: 820px;
  margin: 0 auto;
}

.alm-article-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}

.alm-article-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-slate-600);
  text-decoration: none;
  transition: color 0.15s ease;
  padding: 0.2rem 0;
}
.alm-article-back-link:hover {
  color: var(--color-cyber-emerald);
}

.alm-article-hwg-badge {
  font-size: 0.72rem;
  font-family: var(--font-mono);
  color: var(--color-slate-500);
  background: var(--bg-card-tint);
  border: 1px solid var(--border-color);
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Slim Dossier Switcher Pills Bar */
.alm-dossier-nav-bar {
  display: flex;
  gap: 0.4rem;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 0.35rem 0.5rem;
  background: var(--bg-card-tint);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  margin-bottom: 1.25rem;
}
.alm-dossier-nav-bar::-webkit-scrollbar {
  display: none;
}

.alm-dossier-nav-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  text-decoration: none;
  background: #ffffff;
  color: var(--color-slate-700);
  border: 1px solid var(--border-color);
  flex-shrink: 0;
  transition: all 0.15s ease;
}
.alm-dossier-nav-btn:hover {
  border-color: var(--color-slate-400);
  color: var(--color-cyber-dark);
}
.alm-dossier-nav-btn.active {
  background: var(--color-cyber-dark) !important;
  color: #ffffff !important;
  border-color: var(--color-cyber-dark) !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  font-weight: 800;
}
.alm-dossier-nav-btn.active .dot {
  color: var(--color-cyber-emerald);
}

/* Article Bento Card */
.alm-article-card {
  background: #ffffff;
  padding: 2rem 2.25rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 20px rgba(0,0,0,0.03);
}

.alm-article-badges {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}

.alm-article-title {
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  font-weight: 850;
  color: var(--color-slate-900);
  line-height: 1.25;
  margin-bottom: 0.65rem;
  letter-spacing: -0.02em;
}

.alm-article-meta-bar {
  font-size: 0.8rem;
  color: var(--color-slate-500);
  background: var(--bg-card-tint);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  margin-bottom: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.alm-article-hero-wrap {
  width: 100%;
  max-height: 280px;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(0,0,0,0.06);
  background: #f1f5f9;
}
.alm-article-hero-wrap img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  display: block;
}

/* Compact Content Typography */
.alm-article-body {
  font-size: 0.94rem;
  color: var(--color-slate-700);
  line-height: 1.68;
}

.alm-article-body h2 {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--color-slate-900);
  margin: 1.5rem 0 0.5rem 0;
  line-height: 1.35;
  letter-spacing: -0.01em;
}

.alm-article-body p {
  margin-bottom: 0.85rem;
}

.alm-article-body strong {
  color: var(--color-slate-900);
  font-weight: 750;
}

.alm-article-body ol,
.alm-article-body ul {
  margin: 0.4rem 0 0.9rem 1.15rem;
  padding-left: 0.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

/* Factsheet / Data Boxes */
.alm-article-factsheet {
  background: var(--bg-card-tint);
  border-left: 3.5px solid var(--color-cyber-dark);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin: 1.25rem 0;
}
.alm-article-factsheet-title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-cyber-dark);
  margin-bottom: 0.45rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.alm-article-factsheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem;
  font-size: 0.82rem;
  color: var(--color-slate-700);
}

.alm-article-data-box {
  background: rgba(16,185,129,0.05);
  border: 1px solid rgba(16,185,129,0.22);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin: 1.25rem 0;
}
.alm-article-data-title {
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--color-slate-900);
  margin-bottom: 0.35rem;
}
.alm-article-data-content {
  font-size: 0.84rem;
  color: var(--color-slate-700);
  line-height: 1.55;
}

/* Compact In-Article Product Card */
.alm-article-product-card {
  background: linear-gradient(135deg, rgba(16,185,129,0.04) 0%, rgba(255,255,255,1) 100%);
  border: 1.5px solid rgba(16, 185, 129, 0.3);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.35rem;
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
}
.alm-article-product-info {
  flex: 1 1 280px;
}
.alm-article-product-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--color-cyber-emerald);
  background: rgba(16,185,129,0.1);
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  margin-bottom: 0.35rem;
}
.alm-article-product-title {
  font-size: 1.08rem;
  font-weight: 800;
  color: var(--color-slate-900);
  margin: 0 0 0.2rem 0;
}
.alm-article-product-desc {
  font-size: 0.82rem;
  color: var(--color-slate-600);
  margin: 0;
  line-height: 1.4;
}
.alm-article-product-action {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}
.alm-article-product-price {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--color-cyber-dark);
  text-align: right;
  line-height: 1.1;
}
.alm-article-product-price span {
  display: block;
  font-size: 0.65rem;
  font-weight: 500;
  color: var(--color-slate-500);
}

/* Footnotes */
.alm-article-footnotes {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px dashed var(--border-color);
  font-size: 0.75rem;
  color: var(--color-slate-500);
  line-height: 1.55;
}

/* Dossier Pagination */
.alm-dossier-pagination {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
.alm-dossier-nav-card {
  text-decoration: none;
  padding: 0.85rem 1.05rem;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  transition: all 0.15s ease;
}
.alm-dossier-nav-card:hover {
  border-color: var(--color-cyber-emerald);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}
.alm-dossier-nav-card.prev {
  text-align: left;
}
.alm-dossier-nav-card.next {
  text-align: right;
}
.alm-dossier-nav-label {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  color: var(--color-slate-500);
  font-weight: 700;
  letter-spacing: 0.04em;
}
.alm-dossier-nav-title {
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--color-cyber-dark);
  line-height: 1.3;
}

/* Quick Hub Actions Bar */
.alm-dossier-hub-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding-top: 0.35rem;
}

/* Responsive Breakpoints */
@media (max-width: 768px) {
  .alm-article-card {
    padding: 1.35rem 1.15rem !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 1.25rem !important;
  }
  .alm-article-hero-wrap {
    max-height: 220px !important;
  }
  .alm-article-hero-wrap img {
    height: 220px !important;
  }
  .alm-dossier-pagination {
    grid-template-columns: 1fr !important;
  }
  .alm-dossier-nav-card.next {
    text-align: left !important;
  }
}

@media (max-width: 480px) {
  .alm-article-section {
    padding-top: 0.85rem !important;
    padding-bottom: 2rem !important;
  }
  .alm-article-card {
    padding: 1.1rem 0.85rem !important;
  }
  .alm-article-hero-wrap {
    max-height: 180px !important;
  }
  .alm-article-hero-wrap img {
    height: 180px !important;
  }
  .alm-article-product-card {
    padding: 0.95rem !important;
  }
  .alm-article-product-action {
    width: 100%;
    justify-content: space-between;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid rgba(0,0,0,0.06);
  }
}

/* Dossier Panels: Show only active article */
.alm-article-card.journal-dossier-panel {
  display: none;
}
.alm-article-card.journal-dossier-panel.is-active {
  display: block;
  animation: almArticleFadeIn 0.22s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
.alm-dossier-pagination-panel {
  display: none;
}
.alm-dossier-pagination-panel.is-active {
  display: grid;
}
@keyframes almArticleFadeIn {
  from {
    opacity: 0.2;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   ARTICLE TYPOGRAPHY REFINEMENTS (ANTI-WRAP & COMPACT FLOW)
   ========================================================================== */
.alm-article-title {
  font-size: clamp(1.22rem, 3vw, 1.75rem) !important;
  font-weight: 850 !important;
  color: var(--color-slate-900) !important;
  line-height: 1.28 !important;
  margin: 0.4rem 0 0.65rem 0 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance !important;
  hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}

.alm-article-body p {
  margin-bottom: 0.8rem !important;
  font-size: 0.93rem !important;
  line-height: 1.64 !important;
  color: var(--color-slate-700) !important;
  text-wrap: pretty !important;
  hyphens: none !important;
  word-break: normal !important;
}

.alm-article-body h2 {
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  color: var(--color-slate-900) !important;
  margin: 1.35rem 0 0.45rem 0 !important;
  line-height: 1.32 !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance !important;
  hyphens: none !important;
}

.alm-article-body ol,
.alm-article-body ul {
  margin: 0.4rem 0 1rem 1.35rem !important;
  padding: 0 !important;
  display: block !important;
}

.alm-article-body li {
  margin-bottom: 0.45rem !important;
  line-height: 1.58 !important;
  font-size: 0.92rem !important;
  color: var(--color-slate-700) !important;
}

.alm-article-body li::marker {
  color: var(--color-cyber-dark) !important;
  font-weight: 750 !important;
}

.alm-fact-item {
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--color-slate-700);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.35rem;
}

.alm-fact-key {
  font-weight: 750;
  color: var(--color-slate-900);
  white-space: nowrap;
}

.alm-fact-val {
  color: var(--color-slate-700);
}

.alm-data-rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.45rem;
}

.alm-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem 0.6rem;
  padding: 0.45rem 0.65rem;
  background: #ffffff;
  border-radius: 6px;
  border: 1px solid rgba(16,185,129,0.18);
  font-size: 0.82rem;
}

.alm-data-row.alm-data-highlight {
  background: rgba(16,185,129,0.1);
  border-color: rgba(16,185,129,0.4);
}

.alm-data-label {
  color: var(--color-slate-700);
}

.alm-data-val {
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
}

.alm-val-danger {
  color: #b91c1c;
}

.alm-val-success {
  color: #047857;
  font-weight: 800;
}

.alm-article-product-card {
  text-wrap: normal !important;
}

.alm-article-product-title {
  text-wrap: balance !important;
}

.alm-article-badges .alm-badge {
  font-size: 0.66rem !important;
  padding: 0.18rem 0.5rem !important;
  white-space: nowrap !important;
}

/* ==========================================================================
   MANUFAKTUR & WERKSTOFF-KOMPENDIUM (COMPACT & MODERN UI/UX)
   ========================================================================== */
.manufaktur-hero-header {
  max-width: 760px;
  margin: 0 auto 2rem;
  text-align: center;
}

.manufaktur-title {
  font-size: clamp(1.4rem, 3.6vw, 2.15rem) !important;
  font-weight: 850 !important;
  color: var(--color-slate-900) !important;
  line-height: 1.22 !important;
  margin: 0.45rem 0 0.65rem 0 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance !important;
  hyphens: none !important;
}

.manufaktur-subtitle {
  color: var(--color-slate-600) !important;
  font-size: clamp(0.88rem, 2vw, 0.98rem) !important;
  line-height: 1.5 !important;
  max-width: 580px !important;
  margin: 0 auto !important;
  text-wrap: pretty !important;
}

/* Hero Showcase Card */
.manufaktur-showcase-card {
  max-width: 1080px;
  margin: 0 auto 2.5rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.06);
  border: 1px solid var(--border-color);
  position: relative;
  background: #0E1524;
}

.manufaktur-showcase-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.manufaktur-showcase-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(14,21,36,0) 0%, rgba(14,21,36,0.7) 35%, rgba(10,15,26,0.96) 100%);
  padding: 1.5rem 1.75rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  backdrop-filter: blur(2px);
}

.manufaktur-showcase-headline {
  font-size: clamp(1.05rem, 2.4vw, 1.28rem);
  font-weight: 800;
  color: #ffffff;
  line-height: 1.3;
  margin-top: 0.35rem;
  text-wrap: balance;
  letter-spacing: -0.01em;
}

.manufaktur-badge-location {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.68rem;
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #34d399;
  background: rgba(16,185,129,0.18);
  border: 1px solid rgba(16,185,129,0.35);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
}

.manufaktur-iso-pill {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: #C5A880;
  font-weight: 750;
  background: rgba(14,21,36,0.85);
  padding: 0.3rem 0.65rem;
  border-radius: var(--radius-pill);
  border: 1px solid rgba(197,168,128,0.35);
  white-space: nowrap;
  flex-shrink: 0;
}

/* Material Breakdown Cards */
.manufaktur-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2.75rem;
}

.manufaktur-card {
  background: #ffffff;
  padding: 1.75rem 1.85rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 16px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
}

.manufaktur-card-header {
  margin-bottom: 0.65rem;
}

.manufaktur-card-title {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--color-slate-900);
  margin: 0.4rem 0 0.5rem 0;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.manufaktur-card-desc {
  font-size: 0.88rem;
  color: var(--color-slate-700);
  line-height: 1.6;
  margin-bottom: 0.95rem;
  text-wrap: pretty;
  flex-grow: 1;
}

.manufaktur-specs-box {
  background: var(--bg-card-tint);
  padding: 0.75rem 0.95rem;
  border-radius: 8px;
  border: 1px solid var(--border-color);
  font-size: 0.8rem;
  color: var(--color-slate-800);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.manufaktur-spec-row {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  line-height: 1.4;
}

.manufaktur-spec-chk {
  color: var(--color-cyber-emerald);
  font-weight: 800;
  flex-shrink: 0;
  margin-top: -1px;
}

.manufaktur-spec-text {
  color: var(--color-slate-700);
}

/* Compliance Card */
.manufaktur-compliance-card {
  max-width: 860px;
  margin: 0 auto;
  padding: 1.6rem 2rem;
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(197, 168, 128, 0.3);
  background: radial-gradient(circle at 50% 30%, #151d2f 0%, #0a0f19 100%);
}

/* Mobile Breakpoints */
@media (max-width: 860px) {
  .manufaktur-grid {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }
}

@media (max-width: 768px) {
  .manufaktur-hero-header {
    margin-bottom: 1.5rem;
  }
  .manufaktur-showcase-card {
    margin-bottom: 1.75rem;
    border-radius: var(--radius-md);
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    background: #0E1524 !important;
  }
  .manufaktur-showcase-img {
    height: 220px !important;
    width: 100% !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
  }
  .manufaktur-showcase-overlay {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    background: #0E1524 !important;
    padding: 1.25rem 1.15rem 1.35rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.75rem !important;
    backdrop-filter: none !important;
  }
  .manufaktur-showcase-headline {
    font-size: 1.12rem !important;
    line-height: 1.35 !important;
    margin-top: 0.35rem !important;
    text-wrap: balance !important;
    color: #ffffff !important;
    letter-spacing: -0.01em !important;
  }
  .manufaktur-iso-pill {
    font-size: 0.68rem !important;
    padding: 0.25rem 0.65rem !important;
    align-self: flex-start !important;
  }
  .manufaktur-card {
    padding: 1.35rem 1.15rem;
    border-radius: var(--radius-md);
  }
  .manufaktur-compliance-card {
    padding: 1.35rem 1.15rem;
    border-radius: var(--radius-md);
  }
}

@media (max-width: 480px) {
  .manufaktur-showcase-img {
    height: 200px !important;
  }
  .manufaktur-showcase-overlay {
    padding: 1rem 1rem 1.15rem !important;
    gap: 0.65rem !important;
  }
  .manufaktur-showcase-headline {
    font-size: 1.02rem !important;
    line-height: 1.32 !important;
  }
  .manufaktur-iso-pill {
    font-size: 0.64rem !important;
    padding: 0.2rem 0.5rem !important;
  }
  .manufaktur-card {
    padding: 1.15rem 0.95rem;
  }
  .manufaktur-card-title {
    font-size: 1.1rem;
  }
  .manufaktur-specs-box {
    padding: 0.65rem 0.75rem;
  }
}

/* ==========================================================================
   HWG COMPLIANCE CARD (ULTRA-POLISHED & ACCESSIBLE)
   ========================================================================== */
.manufaktur-compliance-card {
  max-width: 820px;
  margin: 0 auto;
  padding: 2.25rem 2.25rem 2rem !important;
  text-align: center;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(197, 168, 128, 0.35) !important;
  background: radial-gradient(ellipse at 50% -10%, #1c2740 0%, #0d1424 75%, #080d18 100%) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  position: relative;
  overflow: hidden;
}

.compliance-badge-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: #E6C89C;
  background: rgba(197, 168, 128, 0.12);
  border: 1px solid rgba(197, 168, 128, 0.35);
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.85rem;
  white-space: nowrap !important;
  max-width: 100%;
}

.compliance-badge-pill svg {
  color: #C5A880;
  flex-shrink: 0;
}

.compliance-title {
  font-size: clamp(1.2rem, 3.2vw, 1.45rem);
  font-weight: 850;
  color: #ffffff;
  margin: 0 0 0.75rem 0;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.compliance-desc {
  font-size: 0.88rem;
  color: #CBD5E1;
  max-width: 620px;
  margin: 0 auto 1.35rem auto;
  line-height: 1.58;
  text-wrap: pretty;
}

.compliance-desc strong {
  color: #ffffff;
  font-weight: 700;
}

/* 3 Trust Chips */
.compliance-pills-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.compliance-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.4rem 0.85rem;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #F1F5F9;
  letter-spacing: 0.01em;
  white-space: nowrap;
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: all 0.15s ease;
}

.compliance-chip:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(197, 168, 128, 0.4);
}

.compliance-chip .chk {
  color: #10B981;
  font-size: 0.85rem;
  font-weight: 900;
  line-height: 1;
}

/* Action Button */
.compliance-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.72rem 1.75rem;
  font-size: 0.88rem;
  font-weight: 800;
  color: #0E1524 !important;
  background: linear-gradient(135deg, #E6C89C 0%, #C5A880 50%, #B89758 100%) !important;
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 18px rgba(197, 168, 128, 0.35);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
  white-space: nowrap;
}

.compliance-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(197, 168, 128, 0.45);
  filter: brightness(1.05);
}

.compliance-btn:active {
  transform: translateY(0);
}

@media (max-width: 640px) {
  .manufaktur-compliance-card {
    padding: 1.5rem 1.15rem 1.35rem !important;
    border-radius: var(--radius-md) !important;
  }
  .compliance-pills-row {
    flex-direction: column;
    gap: 0.45rem;
    width: 100%;
    margin-bottom: 1.25rem;
  }
  .compliance-chip {
    width: 100%;
    justify-content: center;
    padding: 0.45rem 0.75rem;
  }
  .compliance-btn {
    width: 100%;
    padding: 0.75rem 1.25rem;
  }
}

/* ==========================================================================
   EXPERTIZE & MEDICAL BOARD PAGE (COMPACT, ANTI-WRAP, MOBILE TABS)
   ========================================================================== */
.expert-hero-header {
  max-width: 780px;
  margin: 0 auto 2rem;
  text-align: center;
}

.expert-hero-title {
  font-size: clamp(1.4rem, 3.6vw, 2.15rem) !important;
  font-weight: 850 !important;
  color: var(--color-slate-900) !important;
  line-height: 1.22 !important;
  margin: 0.45rem 0 0.65rem 0 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance !important;
  hyphens: none !important;
}

.expert-hero-subtitle {
  color: var(--color-slate-600) !important;
  font-size: clamp(0.88rem, 2vw, 0.98rem) !important;
  line-height: 1.5 !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  text-wrap: pretty !important;
}

/* Card Profile Header */
.expert-profile-card {
  padding: 2rem 2.25rem !important;
  background: #ffffff !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.03) !important;
  flex-direction: column !important;
}

@media (min-width: 901px) {
  .expert-board-grid {
    display: grid !important;
  }
  .expert-tab-switcher {
    display: none !important;
  }
  .expert-card-tab-item {
    display: flex !important;
  }
}

@media (max-width: 900px) {
  .expert-tab-switcher {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    width: 100% !important;
    max-width: 440px !important;
    margin: 0 auto 1.5rem !important;
  }
  .expert-board-grid {
    display: flex !important;
    flex-direction: column !important;
  }
  .expert-board-grid .expert-card-tab-item {
    display: none !important;
  }
  .expert-board-grid .expert-card-tab-item.active {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    animation: fadeInExpert 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }
}

.expert-profile-head {
  display: flex;
  gap: 1.15rem;
  align-items: center;
  margin-bottom: 1.25rem;
}

.expert-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}

.expert-avatar-img {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.expert-avatar-richter,
.expert-avatar-brandstetter {
  border: 2.5px solid var(--color-cyber-emerald);
}

.expert-avatar-weimann {
  border: 2.5px solid #C5A880;
}

.expert-meta-col {
  flex: 1;
  min-width: 0;
}

.expert-name {
  font-size: clamp(1.15rem, 2.8vw, 1.35rem) !important;
  font-weight: 850 !important;
  color: var(--color-slate-900) !important;
  margin: 0 0 0.15rem 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance !important;
  hyphens: none !important;
}

.expert-role {
  font-size: 0.82rem !important;
  font-weight: 750 !important;
  color: var(--color-cyber-dark) !important;
  line-height: 1.35 !important;
  margin-bottom: 0.2rem !important;
  text-wrap: balance !important;
}

.expert-creds {
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  flex-wrap: wrap !important;
  margin-top: 0.25rem !important;
}

.expert-loc-badge {
  font-family: var(--font-mono) !important;
  font-size: 0.68rem !important;
  font-weight: 750 !important;
  color: var(--color-cyber-dark) !important;
  background: rgba(14, 21, 36, 0.06) !important;
  border: 1px solid rgba(14, 21, 36, 0.12) !important;
  padding: 0.12rem 0.45rem !important;
  border-radius: 4px !important;
  white-space: nowrap !important;
  line-height: 1.3 !important;
  flex-shrink: 0 !important;
}

.expert-creds-text {
  font-family: var(--font-sans) !important;
  font-size: 0.75rem !important;
  color: var(--color-slate-500) !important;
  font-weight: 550 !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  text-wrap: balance !important;
}

/* Quote Statement Block */
.expert-quote-block {
  font-size: 0.92rem !important;
  color: var(--color-slate-700) !important;
  line-height: 1.64 !important;
  margin-bottom: 1.25rem !important;
  flex-grow: 1 !important;
}

.expert-quote-block p {
  margin-bottom: 0.85rem !important;
  text-wrap: pretty !important;
  hyphens: none !important;
}

.expert-quote-block p:last-child {
  margin-bottom: 0 !important;
}

.expert-quote-block em {
  color: var(--color-slate-900) !important;
  font-style: italic !important;
  font-weight: 600 !important;
}

/* Focus Box */
.expert-focus-box {
  background: var(--bg-card-tint);
  border: 1px solid var(--border-color);
  padding: 0.75rem 0.95rem;
  border-radius: 8px;
  font-size: 0.8rem;
  line-height: 1.48;
  color: var(--color-slate-700);
}

.expert-focus-box strong {
  color: var(--color-slate-900);
}

/* Mobile Next / Prev Toggle Button inside Card */
.expert-card-next-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  margin-top: 1rem;
  padding: 0.65rem 1rem;
  background: var(--bg-card-tint);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 750;
  color: var(--color-cyber-dark);
  cursor: pointer;
  transition: all 0.15s ease;
}

.expert-card-next-toggle:hover {
  background: #ffffff;
  border-color: var(--color-cyber-emerald);
}

@media (max-width: 768px) {
  .expert-hero-header {
    margin-bottom: 1.5rem !important;
  }
  .expert-profile-card {
    padding: 1.35rem 1.15rem !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 1.5rem !important;
  }
  .expert-avatar-img {
    width: 64px !important;
    height: 64px !important;
  }
  .expert-profile-head {
    gap: 0.85rem !important;
    margin-bottom: 1rem !important;
  }
  .expert-card-next-toggle {
    display: flex !important;
  }
}

@media (max-width: 480px) {
  .expert-profile-card {
    padding: 1.15rem 0.95rem !important;
  }
  .expert-avatar-img {
    width: 58px !important;
    height: 58px !important;
  }
  .expert-name {
    font-size: 1.12rem !important;
  }
  .expert-role {
    font-size: 0.78rem !important;
  }
  .expert-creds {
    gap: 0.35rem !important;
    margin-top: 0.2rem !important;
  }
  .expert-loc-badge {
    font-size: 0.64rem !important;
    padding: 0.1rem 0.4rem !important;
  }
  .expert-creds-text {
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
  }
  .expert-quote-block {
    font-size: 0.88rem !important;
    line-height: 1.6 !important;
  }
}

/* ==========================================================================
   DISKRETE LOGISTIK & ANONYME NACHNAHME (COMPACT & MODERN UI/UX)
   ========================================================================== */
.logistik-hero-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 1.75rem;
}

.logistik-title {
  font-size: clamp(1.65rem, 3.8vw, 2.35rem) !important;
  font-weight: 850 !important;
  color: var(--color-slate-900) !important;
  margin: 0.5rem 0 0.4rem !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance !important;
  hyphens: none !important;
}

.logistik-subtitle {
  color: var(--color-slate-600) !important;
  font-size: clamp(0.88rem, 2vw, 1.02rem) !important;
  line-height: 1.55 !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  text-wrap: balance !important;
}

/* 4-Step Process Strip (4-col desktop, 2-col mobile) */
.logistik-process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}

.logistik-process-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.05rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.logistik-process-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);
}

.proc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.65rem;
}

.proc-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(14, 21, 36, 0.04);
  border: 1px solid rgba(14, 21, 36, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cyber-dark);
  flex-shrink: 0;
}

.proc-icon-wrap svg {
  width: 17px;
  height: 17px;
  stroke: var(--color-cyber-dark);
}

.proc-step-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  color: #64748B;
  background: rgba(14, 21, 36, 0.04);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
}

.logistik-step-title {
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  color: var(--color-slate-900) !important;
  margin: 0 0 0.35rem 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance !important;
  min-height: 2.5em;
  display: flex;
  align-items: flex-end;
}

.logistik-step-desc {
  font-size: 0.77rem !important;
  color: var(--color-slate-600) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  text-wrap: pretty !important;
  flex-grow: 1;
}

/* Dual Protocols Bento Grid */
.logistik-protocols-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.logistik-protocol-card {
  background: #ffffff !important;
  padding: 1.5rem 1.5rem 1.4rem !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04) !important;
  display: flex;
  flex-direction: column;
}

.logistik-protocol-head {
  margin-bottom: 0.5rem;
}

.logistik-protocol-title {
  font-size: clamp(1.15rem, 2.4vw, 1.32rem) !important;
  font-weight: 850 !important;
  color: var(--color-slate-900) !important;
  margin: 0.45rem 0 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance !important;
}

.logistik-protocol-lead {
  font-size: 0.85rem !important;
  color: var(--color-slate-600) !important;
  line-height: 1.48 !important;
  margin-bottom: 1rem !important;
  text-wrap: pretty !important;
}

.logistik-specs-box {
  background: var(--color-slate-50);
  border: 1px solid rgba(14, 21, 36, 0.08);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-top: auto;
}

.logistik-spec-row {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: 0.81rem;
  line-height: 1.45;
}

.logistik-spec-chk {
  color: var(--color-cyber-dark);
  font-weight: 850;
  font-size: 0.88rem;
  line-height: 1.2;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.logistik-spec-lbl {
  color: var(--color-slate-900);
  font-weight: 750;
  margin-right: 0.25rem;
}

.logistik-spec-txt {
  color: var(--color-slate-600);
}

/* Showcase Hero Box */
.logistik-showcase-stage {
  max-width: 1160px;
  margin: 0 auto 2rem;
  padding: 1.75rem !important;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(197, 168, 128, 0.35) !important;
  background: radial-gradient(circle at 75% 30%, #151d2f 0%, #0a0f19 100%) !important;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.logistik-showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1.18fr;
  gap: 1.75rem;
  align-items: stretch;
}

.logistik-photo-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 380px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(197, 168, 128, 0.28);
  background: radial-gradient(circle at 50% 50%, #172033 0%, #0a0f1a 100%);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
}

.logistik-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.logistik-photo-badge-bar {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  pointer-events: none;
}

.photo-badge-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(10, 15, 26, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(197, 168, 128, 0.4);
  color: #FAF4EB;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  padding: 0.28rem 0.6rem;
  border-radius: 9999px;
  white-space: nowrap;
}

.photo-badge-accent {
  color: #34d399;
  border-color: rgba(52, 211, 153, 0.4);
  background: rgba(10, 15, 26, 0.92);
}

.logistik-photo-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(10, 15, 26, 0.92) 50%, #0a0f1a 100%);
  padding: 1.25rem 0.85rem 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #C5A880;
  font-weight: 750;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.photo-caption-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logistik-showcase-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.15rem;
}

.logistik-showcase-title {
  font-size: clamp(1.3rem, 2.6vw, 1.55rem) !important;
  font-weight: 850 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
  margin: 0.35rem 0 0.45rem 0 !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance !important;
}

.logistik-showcase-desc {
  font-size: 0.86rem !important;
  color: #94A3B8 !important;
  line-height: 1.52 !important;
  margin: 0 0 1rem 0 !important;
  text-wrap: pretty !important;
}

.logistik-tiles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}

.logistik-tile-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 0.8rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.logistik-tile-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 750;
  color: #E2D1B3;
  white-space: nowrap;
}

.logistik-tile-body {
  font-size: 0.77rem;
  color: #94A3B8;
  line-height: 1.42;
  text-wrap: pretty;
}

/* Actions & Trust Bar */
.logistik-actions-box {
  padding-top: 0.95rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.logistik-buttons-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
}

.logistik-btn-primary {
  flex: 1.25;
  justify-content: center;
  padding: 0.72rem 1.25rem !important;
  font-size: 0.88rem !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
}

.logistik-btn-secondary {
  flex: 1;
  justify-content: center;
  padding: 0.72rem 1rem !important;
  font-size: 0.84rem !important;
  font-weight: 700 !important;
  white-space: nowrap !important;
}

.logistik-trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  width: 100%;
}

.logistik-trust-item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 0.45rem 0.35rem;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #CBD5E1;
  white-space: nowrap;
}

/* Packstation Callout Box */
.logistik-packstation-box {
  max-width: 1160px;
  margin: 0 auto 2rem;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.65rem 1.75rem;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.packstation-header-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.packstation-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(14, 21, 36, 0.05);
  border: 1px solid rgba(14, 21, 36, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  flex-shrink: 0;
}

.packstation-title {
  font-size: 1.2rem !important;
  font-weight: 850 !important;
  color: var(--color-slate-900) !important;
  margin: 0.2rem 0 0 0 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance !important;
}

.packstation-desc {
  font-size: 0.86rem !important;
  color: var(--color-slate-600) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
  text-wrap: pretty !important;
}

.packstation-pills {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-top: 0.2rem;
}

.packstation-pill {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-cyber-dark);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* FAQ Grid */
.logistik-faq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 2rem;
}

.logistik-faq-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.15rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
}

.logistik-faq-q {
  font-size: 0.95rem !important;
  font-weight: 800 !important;
  color: var(--color-slate-900) !important;
  margin: 0 0 0.45rem 0 !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance !important;
}

.logistik-faq-a {
  font-size: 0.83rem !important;
  color: var(--color-slate-600) !important;
  line-height: 1.52 !important;
  margin: 0 !important;
  text-wrap: pretty !important;
}

/* Responsive Breakpoints */
@media (max-width: 900px) {
  .logistik-process-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
  }
  .logistik-process-card {
    padding: 0.85rem 0.75rem !important;
    border-radius: var(--radius-md) !important;
  }
  .proc-card-top {
    margin-bottom: 0.45rem !important;
  }
  .proc-icon-wrap {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
  }
  .proc-icon-wrap svg {
    width: 14px !important;
    height: 14px !important;
  }
  .proc-step-badge {
    font-size: 0.58rem !important;
    padding: 0.1rem 0.35rem !important;
  }
  .logistik-step-title {
    font-size: 0.84rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.25rem !important;
    min-height: 2.5em !important;
  }
  .logistik-step-desc {
    font-size: 0.72rem !important;
    line-height: 1.38 !important;
  }
  .logistik-protocols-grid {
    grid-template-columns: 1fr;
    gap: 1.15rem;
  }
  .logistik-showcase-grid {
    grid-template-columns: 1fr;
    gap: 1.35rem;
  }
  .logistik-photo-wrapper {
    min-height: 250px;
    height: 250px;
  }
  .logistik-faq-grid {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}

@media (max-width: 600px) {
  .logistik-hero-header {
    margin-bottom: 1.35rem;
  }
  .logistik-showcase-stage {
    padding: 1.15rem 0.95rem !important;
    margin-bottom: 1.75rem;
  }
  .logistik-photo-wrapper {
    height: 210px;
    min-height: 210px;
  }
  .logistik-tiles-grid {
    grid-template-columns: 1fr;
    gap: 0.55rem;
  }
  .logistik-buttons-row {
    flex-direction: column;
    gap: 0.55rem;
  }
  .logistik-btn-primary,
  .logistik-btn-secondary {
    width: 100% !important;
    flex: none !important;
  }
  .logistik-trust-strip {
    grid-template-columns: 1fr;
    gap: 0.35rem;
  }
  .logistik-trust-item {
    justify-content: flex-start;
    padding: 0.4rem 0.65rem;
    font-size: 0.72rem;
  }
  .logistik-protocol-card {
    padding: 1.15rem 0.95rem !important;
  }
  .logistik-specs-box {
    padding: 0.75rem 0.75rem;
  }
  .logistik-packstation-box {
    padding: 1.15rem 0.95rem;
    margin-bottom: 1.75rem;
  }
  .packstation-header-row {
    align-items: flex-start;
  }
}

@media (max-width: 380px) {
  .photo-badge-tag {
    font-size: 0.6rem;
    padding: 0.2rem 0.45rem;
  }
  .logistik-photo-caption {
    font-size: 0.64rem;
  }
}

/* ==========================================================================
   PAKET-STATUS & SENDUNGSVERFOLGUNG (COMPACT & MODERN UI/UX)
   ========================================================================== */
.tracking-hero-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 1.75rem;
}

.tracking-title {
  font-size: clamp(1.65rem, 3.8vw, 2.25rem) !important;
  font-weight: 850 !important;
  color: var(--color-slate-900) !important;
  margin: 0.5rem 0 0.35rem !important;
  line-height: 1.22 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance !important;
  hyphens: none !important;
}

.tracking-subtitle {
  color: var(--color-slate-600) !important;
  font-size: clamp(0.88rem, 2vw, 0.98rem) !important;
  line-height: 1.5 !important;
  max-width: 560px !important;
  margin: 0 auto 0.75rem !important;
  text-wrap: balance !important;
}

.tracking-demo-pills {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tracking-demo-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(14, 21, 36, 0.05);
  border: 1px solid rgba(14, 21, 36, 0.12);
  border-radius: var(--radius-pill);
  padding: 0.28rem 0.7rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-slate-800);
  cursor: pointer;
  transition: all 0.2s ease;
}

.tracking-demo-pill:hover {
  background: rgba(16, 185, 129, 0.12);
  border-color: rgba(16, 185, 129, 0.4);
  color: var(--color-cyber-dark);
  transform: translateY(-1px);
}

.demo-pill-label {
  color: var(--color-slate-500);
  font-weight: 500;
}

/* Tracking Form Card */
.tracking-form-card {
  max-width: 640px;
  margin: 0 auto 1.75rem;
  padding: 1.75rem 2rem !important;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.04);
}

.tracking-label {
  display: block;
  font-size: 0.86rem;
  font-weight: 750;
  color: var(--color-slate-800);
  margin-bottom: 0.55rem;
}

.tracking-input-group {
  display: flex;
  gap: 0.6rem;
  align-items: stretch;
  width: 100%;
}

.tracking-input {
  flex: 1;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 750;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.82rem 1.15rem;
  border: 1.5px solid rgba(197, 168, 128, 0.45);
  border-radius: 10px;
  background: #ffffff;
  color: var(--color-slate-900);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.tracking-input::placeholder {
  color: #94A3B8;
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.tracking-input:hover {
  border-color: #C5A880;
  background-color: #FCFAF7;
  box-shadow: 0 2px 8px rgba(197, 168, 128, 0.16);
}

.tracking-input:focus {
  border-color: #C5A880;
  background-color: #ffffff;
  box-shadow: 0 0 0 3.5px rgba(197, 168, 128, 0.25), 0 4px 14px rgba(15, 23, 42, 0.06);
  outline: none;
}

.tracking-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.75rem 1.45rem !important;
  font-size: 0.92rem !important;
  font-weight: 750 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  border-radius: var(--radius-sm) !important;
  background: #0E1524 !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.2s ease, transform 0.15s ease;
}

.tracking-submit-btn:hover {
  background: #1c2740 !important;
}

.tracking-submit-btn:active {
  transform: scale(0.98);
}

/* Tracking Reference Info Cards */
.tracking-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 640px;
  margin: 1.5rem auto 0;
}

.tracking-info-card {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 1.15rem 1rem;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tracking-info-icon {
  font-size: 1.5rem;
  margin-bottom: 0.4rem;
  line-height: 1;
}

.tracking-info-title {
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  color: var(--color-slate-900) !important;
  margin: 0 0 0.25rem 0 !important;
  line-height: 1.25 !important;
}

.tracking-info-desc {
  font-size: 0.76rem !important;
  color: var(--color-slate-600) !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

@media (max-width: 600px) {
  .tracking-hero-header {
    margin-bottom: 1.35rem;
  }
  .tracking-form-card {
    padding: 1.25rem 1rem !important;
    margin-bottom: 1.35rem;
  }
  .tracking-input-group {
    gap: 0.45rem;
  }
  .tracking-input {
    font-size: 0.92rem;
    padding: 0.65rem 0.75rem;
  }
  .tracking-submit-btn {
    padding: 0.65rem 1.25rem !important;
    font-size: 0.88rem !important;
  }
  .tracking-info-grid {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }
  .tracking-info-card {
    padding: 0.85rem 0.95rem;
    flex-direction: row;
    text-align: left;
    gap: 0.75rem;
  }
  .tracking-info-icon {
    margin-bottom: 0;
    font-size: 1.35rem;
  }
}

/* ==========================================================================
   DYNAMIC LOGISTICS TRACKING RESULT & ERROR STYLES (paket-status.html)
   ========================================================================== */
.tracking-result-card {
  max-width: 640px;
  margin: 0 auto 2rem;
  padding: 1.6rem 1.8rem;
  background: #ffffff;
  border-radius: var(--radius-lg, 16px);
  border: 1.5px solid rgba(197, 168, 128, 0.45);
  box-shadow: 0 10px 32px rgba(15, 23, 42, 0.06);
  animation: fadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tracking-result-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px dashed rgba(197, 168, 128, 0.38);
}

.tracking-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #ECFDF5;
  border: 1px solid #A7F3D0;
  color: #065F46;
  font-size: 0.78rem;
  font-weight: 750;
  padding: 0.25rem 0.65rem;
  border-radius: 9999px;
  letter-spacing: 0.01em;
}

.tracking-live-beacon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35);
  animation: pulseBeacon 1.8s infinite ease-in-out;
  display: inline-block;
}

.tracking-order-id-title {
  font-size: 1.45rem;
  font-weight: 900;
  color: #0E1524;
  font-family: var(--font-mono, monospace);
  margin: 0.4rem 0 0 0;
  letter-spacing: 0.02em;
}

.tracking-destination-info {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.tracking-destination-info .dest-label {
  font-size: 0.68rem;
  text-transform: uppercase;
  color: #64748B;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: var(--font-mono, monospace);
}

.tracking-destination-info .dest-val {
  font-size: 0.88rem;
  font-weight: 750;
  color: #1E293B;
}

.tracking-destination-info .dest-carrier {
  font-size: 0.72rem;
  color: #8F6F3A;
  font-family: var(--font-mono, monospace);
  font-weight: 600;
}

.tracking-timeline {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 1.35rem 0 0.85rem;
}

.tracking-timeline-step {
  display: flex;
  gap: 1.15rem;
  position: relative;
}

.timeline-step-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 32px;
  flex-shrink: 0;
}

.step-circle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 850;
  font-family: var(--font-mono, monospace);
  transition: all 0.2s ease;
  z-index: 2;
}

.tracking-timeline-step.step-completed .step-circle {
  background: #0E1524;
  color: #C5A880;
  border: 2px solid #C5A880;
  box-shadow: 0 2px 8px rgba(14, 21, 36, 0.15);
}

.tracking-timeline-step.step-active .step-circle {
  background: #C5A880;
  color: #0E1524;
  border: 2px solid #0E1524;
  box-shadow: 0 0 0 4px rgba(197, 168, 128, 0.35);
  animation: pulseBeacon 2s infinite ease-in-out;
}

.tracking-timeline-step.step-pending .step-circle {
  background: #F8FAFC;
  color: #94A3B8;
  border: 2px dashed #CBD5E1;
}

.step-connector {
  width: 2px;
  min-height: 34px;
  flex-grow: 1;
  background: #E2E8F0;
  margin: 3px 0;
}

.tracking-timeline-step.step-completed .step-connector {
  background: #0E1524;
}

.step-body {
  padding-bottom: 1.35rem;
  flex: 1;
  min-width: 0;
}

.step-tag {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-mono, monospace);
}

.tracking-timeline-step.step-completed .step-tag {
  color: #059669;
}

.tracking-timeline-step.step-active .step-tag {
  color: #B45309;
}

.tracking-timeline-step.step-pending .step-tag {
  color: #94A3B8;
}

.step-title {
  font-size: 0.96rem;
  font-weight: 800;
  color: #0E1524;
  margin: 0.15rem 0 0.15rem;
  line-height: 1.3;
}

.step-desc {
  font-size: 0.8rem;
  color: #475569;
  line-height: 1.45;
}

.tracking-items-section {
  background: #FAF8F5;
  border: 1px solid rgba(197, 168, 128, 0.3);
  border-radius: 12px;
  padding: 0.95rem 1.1rem;
  margin-top: 0.45rem;
}

.tracking-items-heading {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #64748B;
  letter-spacing: 0.04em;
  font-family: var(--font-mono, monospace);
  margin-bottom: 0.55rem;
}

.tracking-items-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.tracking-item-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #ffffff;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
  border: 1px solid rgba(197, 168, 128, 0.25);
}

.tracking-item-thumb {
  width: 44px;
  height: 44px;
  border-radius: 6px;
  overflow: hidden;
  flex-shrink: 0;
  background: #F4F0EA;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tracking-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tracking-item-meta {
  flex: 1;
  min-width: 0;
}

.tracking-item-title {
  font-size: 0.84rem;
  font-weight: 750;
  color: #0E1524;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tracking-item-sub {
  font-size: 0.72rem;
  color: #64748B;
  font-family: var(--font-mono, monospace);
  display: flex;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.tracking-item-qty {
  font-weight: 800;
  color: #8F6F3A;
}

.tracking-guarantee-note {
  font-size: 0.78rem;
  color: #475569;
  background: rgba(197, 168, 128, 0.12);
  border: 1px solid rgba(197, 168, 128, 0.32);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-top: 1rem;
  line-height: 1.45;
}

.tracking-error-card {
  display: flex;
  gap: 0.95rem;
  align-items: flex-start;
  background: #FEF2F2;
  border: 1.5px solid #FCA5A5;
  border-radius: 14px;
  padding: 1.15rem 1.35rem;
  margin: 0 auto 1.75rem;
  max-width: 640px;
  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.08);
  animation: fadeIn 0.25s ease-out;
}

.tracking-error-icon {
  font-size: 1.6rem;
  line-height: 1;
  flex-shrink: 0;
}

.tracking-error-title {
  font-size: 0.95rem !important;
  font-weight: 850 !important;
  color: #991B1B !important;
  margin: 0 0 0.25rem 0 !important;
  line-height: 1.25 !important;
}

.tracking-error-desc {
  font-size: 0.82rem !important;
  color: #7F1D1D !important;
  line-height: 1.45 !important;
}

.tracking-error-desc code {
  background: rgba(254, 202, 202, 0.5);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-weight: 700;
  color: #7F1D1D;
}

@media (max-width: 640px) {
  .tracking-result-card {
    padding: 1.1rem 1rem;
    margin-bottom: 1.5rem;
  }
  .tracking-result-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.65rem;
    padding-bottom: 0.85rem;
  }
  .tracking-destination-info {
    text-align: left;
    width: 100%;
    padding-top: 0.45rem;
    border-top: 1px dashed rgba(197, 168, 128, 0.28);
  }
  .tracking-order-id-title {
    font-size: 1.25rem;
  }
  .tracking-timeline-step {
    gap: 0.85rem;
  }
  .step-circle {
    width: 28px;
    height: 28px;
    font-size: 0.78rem;
  }
  .timeline-step-indicator {
    width: 28px;
  }
  .step-connector {
    min-height: 28px;
  }
  .step-body {
    padding-bottom: 1.1rem;
  }
  .step-title {
    font-size: 0.9rem;
  }
  .step-desc {
    font-size: 0.76rem;
  }
  .tracking-error-card {
    padding: 0.95rem 1rem;
    gap: 0.75rem;
  }
}

/* ==========================================================================
   KUNDENSERVICE & KLINISCHER SUPPORT (COMPACT & MODERN UI/UX)
   ========================================================================== */
.kundenservice-hero-header {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 2rem;
}

.kundenservice-title {
  font-size: clamp(1.65rem, 3.8vw, 2.35rem) !important;
  font-weight: 850 !important;
  color: var(--color-slate-900) !important;
  margin: 0.5rem 0 0.35rem !important;
  line-height: 1.2 !important;
  letter-spacing: -0.02em !important;
  text-wrap: balance !important;
  hyphens: none !important;
}

.kundenservice-subtitle {
  color: var(--color-slate-600) !important;
  font-size: clamp(0.9rem, 2vw, 1.02rem) !important;
  line-height: 1.55 !important;
  max-width: 620px !important;
  margin: 0 auto !important;
  text-wrap: balance !important;
}

/* Contact Bento Cards */
.contact-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.15rem;
  margin-bottom: 2.5rem;
}

@media (max-width: 991px) and (min-width: 769px) {
  .contact-bento-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-card {
  background: #ffffff !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-md) !important;
  padding: 1.35rem 1.15rem !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: left !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  position: relative;
}

.contact-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06) !important;
}

.contact-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 0.65rem;
  gap: 0.35rem;
}

.contact-icon-wrap {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: rgba(14, 21, 36, 0.04);
  border: 1px solid rgba(14, 21, 36, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cyber-dark);
  flex-shrink: 0;
}

.contact-icon-wrap svg {
  width: 16px;
  height: 16px;
  stroke: var(--color-cyber-dark);
}

.contact-status-tag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  color: var(--color-cyber-dark);
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

.contact-card-title {
  font-size: 1rem !important;
  font-weight: 800 !important;
  color: var(--color-slate-900) !important;
  margin: 0 0 0.25rem 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

.contact-card-desc {
  font-size: 0.8rem !important;
  color: var(--color-slate-600) !important;
  line-height: 1.42 !important;
  margin: 0 0 0.75rem 0 !important;
  flex-grow: 1;
}

.contact-card-link {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 750;
  color: var(--color-cyber-dark);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  transition: color 0.15s ease;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-card-link:hover {
  color: var(--color-slate-900);
}

/* Support Form Card */
.support-form-card {
  max-width: 760px;
  margin: 0 auto 3rem;
  padding: 2rem !important;
  background: #ffffff;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.04);
}

.support-form-header {
  margin-bottom: 1.35rem;
}

.support-form-title {
  font-size: 1.35rem !important;
  font-weight: 850 !important;
  color: var(--color-slate-900) !important;
  margin: 0 0 0.35rem 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

.support-form-subtitle {
  font-size: 0.86rem !important;
  color: var(--color-slate-600) !important;
  line-height: 1.5 !important;
  margin: 0 !important;
}

.support-submit-btn {
  width: 100% !important;
  justify-content: center !important;
  padding: 0.85rem 1.5rem !important;
  font-size: 0.95rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.01em !important;
}

.support-guarantee-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  color: var(--color-slate-500);
  margin-top: 0.75rem;
  text-align: center;
}

/* Clinical FAQ Header */
.faq-section-header {
  text-align: center;
  max-width: 740px;
  margin: 0 auto 1.75rem;
}

.faq-section-title {
  font-size: clamp(1.4rem, 3.2vw, 1.85rem) !important;
  font-weight: 850 !important;
  color: var(--color-slate-900) !important;
  margin: 0.4rem 0 0.35rem !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance !important;
}

.faq-section-subtitle {
  font-size: 0.88rem !important;
  color: var(--color-slate-600) !important;
  line-height: 1.5 !important;
  margin: 0 auto !important;
  max-width: 580px !important;
  text-wrap: balance !important;
}

@media (max-width: 768px) {
  .kundenservice-hero-header {
    margin-bottom: 1.5rem;
  }
  .contact-bento-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.65rem !important;
    margin-bottom: 1.75rem !important;
  }
  .contact-card {
    padding: 0.85rem 0.7rem !important;
    border-radius: var(--radius-md) !important;
  }
  .contact-card-top {
    margin-bottom: 0.45rem !important;
    gap: 0.25rem !important;
  }
  .contact-icon-wrap {
    width: 28px !important;
    height: 28px !important;
    border-radius: 6px !important;
  }
  .contact-icon-wrap svg {
    width: 14px !important;
    height: 14px !important;
  }
  .contact-status-tag {
    font-size: 0.58rem !important;
    padding: 0.12rem 0.35rem !important;
    letter-spacing: -0.01em !important;
  }
  .contact-card-title {
    font-size: 0.86rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.25rem !important;
    min-height: 2.2em !important;
  }
  .contact-card-desc {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.45rem !important;
  }
  .contact-card-link {
    font-size: 0.72rem !important;
    gap: 0.2rem !important;
  }
  .support-form-card {
    padding: 1.25rem 1rem !important;
    margin-bottom: 2rem;
  }
  .alm-topic-grid {
    gap: 0.45rem !important;
  }
  .alm-topic-btn {
    font-size: 0.78rem !important;
    padding: 0.5rem 0.75rem !important;
    min-height: 38px !important;
  }
}

/* ==========================================================================
   MERKZETTEL / WISHLIST MODERN BENTO STYLES
   ========================================================================== */
.merkzettel-hero-header {
  padding-top: clamp(1.5rem, 3.5vw, 2.5rem);
  text-align: center;
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

.merkzettel-title {
  font-size: clamp(1.85rem, 3.5vw, 2.65rem) !important;
  font-weight: 850 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.15 !important;
  color: var(--color-slate-900) !important;
  margin: 0.45rem 0 0.65rem 0 !important;
  text-wrap: balance !important;
}

.merkzettel-subtitle {
  color: var(--color-slate-600) !important;
  font-size: clamp(0.92rem, 1.4vw, 1.05rem) !important;
  line-height: 1.6 !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  text-wrap: pretty !important;
}

/* Merkzettel Trust Strip */
.merkzettel-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.85rem;
  margin-bottom: clamp(2rem, 3.5vw, 2.75rem);
}

.merkzettel-trust-item {
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.merkzettel-trust-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.merkzettel-trust-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(14, 21, 36, 0.04);
  border: 1px solid rgba(14, 21, 36, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-cyber-dark);
  flex-shrink: 0;
}

.merkzettel-trust-icon svg {
  width: 15px;
  height: 15px;
}

.merkzettel-trust-text {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-slate-800);
  line-height: 1.3;
}

/* Merkzettel Advisory Card */
.merkzettel-advisory-card {
  background: linear-gradient(135deg, #ffffff 0%, #fdfbf7 100%);
  border: 1.5px solid rgba(197, 168, 128, 0.35);
  border-radius: var(--radius-xl);
  padding: 1.5rem 2.25rem;
  margin-top: 2.75rem;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 2rem;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.merkzettel-advisory-card:hover {
  border-color: rgba(197, 168, 128, 0.55);
  box-shadow: 0 8px 30px rgba(197, 168, 128, 0.1);
}

.merkzettel-advisory-main {
  flex: 1 1 auto;
  max-width: 680px;
}

.merkzettel-advisory-badge {
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  padding: 0.25rem 0.65rem !important;
  margin-bottom: 0.45rem !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  background: rgba(197, 168, 128, 0.15) !important;
  color: #8C6D3F !important;
  border: 1px solid rgba(197, 168, 128, 0.35) !important;
  border-radius: var(--radius-pill) !important;
}

.merkzettel-advisory-title {
  font-size: 1.45rem !important;
  font-weight: 850 !important;
  color: var(--color-slate-900) !important;
  margin: 0.35rem 0 0.35rem 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
}

.merkzettel-advisory-desc {
  font-size: 0.92rem !important;
  color: var(--color-slate-600) !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

.merkzettel-advisory-actions {
  display: flex;
  align-items: center;
  gap: 0.95rem;
  flex-shrink: 0;
}

.merkzettel-pill-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  font-weight: 750;
  color: #065F46;
  background: rgba(16, 185, 129, 0.08);
  border: 1.5px solid rgba(16, 185, 129, 0.28);
  padding: 0.65rem 1.15rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}

.merkzettel-pill-link:hover {
  background: rgba(16, 185, 129, 0.16);
  border-color: rgba(16, 185, 129, 0.45);
  color: #047857;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.18);
}

.merkzettel-advisory-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  padding: 0.65rem 1.35rem !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  border-radius: var(--radius-pill) !important;
  background: linear-gradient(135deg, #B38F5C 0%, #9C7846 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(179, 143, 92, 0.35) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

.merkzettel-advisory-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(179, 143, 92, 0.5) !important;
}

.merkzettel-advisory-btn .advisory-btn-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.merkzettel-advisory-btn:hover .advisory-btn-arrow {
  transform: translateX(3px);
}

/* Wishlist Toolbar Bar Desktop */
.wishlist-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  animation: pulseWishlistDot 2s infinite;
  display: inline-block;
  flex-shrink: 0;
}

@keyframes pulseWishlistDot {
  0% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
  }
  70% {
    box-shadow: 0 0 0 5px rgba(16, 185, 129, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
  }
}

.wishlist-toolbar-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0.95rem 1.45rem !important;
  background: #ffffff !important;
  border-radius: var(--radius-lg) !important;
  border: 1.5px solid rgba(197, 168, 128, 0.35) !important;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04) !important;
  gap: 1.25rem !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
  box-sizing: border-box !important;
  width: 100% !important;
  min-height: 64px !important;
}

.wishlist-toolbar-card:hover {
  border-color: rgba(197, 168, 128, 0.6) !important;
  box-shadow: 0 6px 24px rgba(197, 168, 128, 0.12) !important;
}

.wishlist-toolbar-header-row {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
}

.wishlist-toolbar-count {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  font-size: 0.92rem !important;
  font-weight: 750 !important;
  color: var(--color-slate-900) !important;
}

.wishlist-count-label {
  color: var(--color-slate-700) !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em;
}

.wishlist-count-badge {
  font-family: var(--font-mono) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  color: var(--color-matte-bronze, #B38F5C) !important;
  background: rgba(197, 168, 128, 0.14) !important;
  border: 1px solid rgba(197, 168, 128, 0.35) !important;
  padding: 0.18rem 0.6rem !important;
  border-radius: 999px !important;
  letter-spacing: 0.02em !important;
}

.wishlist-toolbar-divider {
  width: 1px;
  height: 22px;
  background: rgba(197, 168, 128, 0.35);
  margin: 0 0.25rem;
}

.wishlist-toolbar-total {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.86rem;
}

.wishlist-total-label {
  color: var(--color-slate-600);
  font-weight: 600;
}

.wishlist-total-price {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 850;
  color: var(--color-slate-900);
}

.wishlist-toolbar-clear-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.35rem !important;
  padding: 0.38rem 0.75rem !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  color: #dc2626 !important;
  background: rgba(239, 68, 68, 0.06) !important;
  border: 1px solid rgba(239, 68, 68, 0.22) !important;
  border-radius: 7px !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
  white-space: nowrap !important;
  line-height: 1 !important;
}

.wishlist-toolbar-clear-btn:hover {
  background: #dc2626 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(220, 38, 38, 0.25);
}

.wishlist-toolbar-add-all-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55rem !important;
  padding: 0.65rem 1.45rem !important;
  font-size: 0.88rem !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
  border-radius: var(--radius-pill) !important;
  background: linear-gradient(135deg, #B38F5C 0%, #9C7846 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(179, 143, 92, 0.35) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  line-height: 1 !important;
  min-height: 42px !important;
}

.wishlist-toolbar-add-all-btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(179, 143, 92, 0.5) !important;
}

.wishlist-toolbar-add-all-btn .wishlist-btn-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.wishlist-toolbar-add-all-btn:hover .wishlist-btn-arrow {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .merkzettel-hero-header {
    margin-bottom: 1.5rem;
  }
  .merkzettel-trust-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    margin-bottom: 1.5rem !important;
  }
  .merkzettel-trust-item {
    padding: 0.65rem 0.55rem !important;
    gap: 0.45rem !important;
    border-radius: var(--radius-md) !important;
  }
  .merkzettel-trust-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 6px !important;
  }
  .merkzettel-trust-icon svg {
    width: 13px !important;
    height: 13px !important;
  }
  .merkzettel-trust-text {
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
  }
  .wishlist-toolbar-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.65rem 0.8rem !important;
    gap: 0.55rem !important;
    border-radius: var(--radius-md) !important;
  }
  .wishlist-toolbar-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }
  .wishlist-toolbar-divider,
  .wishlist-toolbar-total {
    display: none !important;
  }
  .wishlist-toolbar-count {
    font-size: 0.8rem !important;
    gap: 0.35rem !important;
  }
  .wishlist-count-badge {
    font-size: 0.7rem !important;
    padding: 0.1rem 0.42rem !important;
  }
  .wishlist-toolbar-clear-btn {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.7rem !important;
    gap: 0.25rem !important;
  }
  .wishlist-toolbar-clear-btn svg {
    width: 11px !important;
    height: 11px !important;
  }
  .wishlist-toolbar-add-all-btn {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.55rem 0.9rem !important;
    font-size: 0.8rem !important;
    min-height: 36px !important;
    border-radius: var(--radius-pill) !important;
  }
  .wishlist-toolbar-add-all-btn svg {
    width: 14px !important;
    height: 14px !important;
  }
  .merkzettel-advisory-card {
    padding: 1.35rem 1rem !important;
    text-align: center;
    flex-direction: column;
    align-items: center;
    gap: 1.15rem !important;
    margin-top: 2rem !important;
  }
  .merkzettel-advisory-actions {
    width: 100%;
    flex-direction: column;
    gap: 0.5rem;
  }
  .merkzettel-advisory-actions a,
  .merkzettel-advisory-actions .alm-btn {
    width: 100% !important;
    justify-content: center !important;
  }
  #wishlistPageItems .alm-product-card {
    grid-column: span 6 !important;
  }
}

@media (max-width: 480px) {
  #wishlistPageItems .alm-product-card {
    grid-column: span 6 !important;
  }
}

/* Merkzettel Empty State Card Proportions */
.wishlist-empty-card {
  text-align: center;
  padding: 1.75rem 1.25rem !important;
  background: #ffffff !important;
  border-radius: var(--radius-lg) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.02) !important;
  max-width: 640px;
  margin: 0 auto 1.5rem !important;
}

.wishlist-empty-icon {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(197, 168, 128, 0.12) !important;
  border: 1px solid rgba(197, 168, 128, 0.28) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 0.65rem !important;
  color: var(--color-matte-bronze, #B38F5C) !important;
}

.wishlist-empty-icon svg {
  width: 17px !important;
  height: 17px !important;
}

.wishlist-empty-title {
  font-size: clamp(1.15rem, 2.5vw, 1.35rem) !important;
  font-weight: 850 !important;
  color: var(--color-slate-900) !important;
  margin: 0 0 0.35rem 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  text-wrap: balance !important;
}

.wishlist-empty-desc {
  color: var(--color-slate-600) !important;
  font-size: 0.84rem !important;
  line-height: 1.48 !important;
  max-width: 480px !important;
  margin: 0 auto 1.15rem !important;
  text-wrap: pretty !important;
}

.wishlist-empty-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.65rem;
  flex-wrap: wrap;
}

.wishlist-cta-btn {
  font-weight: 750 !important;
  font-size: 0.8rem !important;
  padding: 0.42rem 0.9rem !important;
  white-space: nowrap !important;
}

/* Merkzettel Bestseller Carousel Styles */
.wishlist-slider-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.wishlist-slider-title {
  font-size: clamp(1.2rem, 2.5vw, 1.45rem);
  font-weight: 850;
  color: var(--color-slate-900);
  margin: 0.35rem 0 0.15rem 0;
  letter-spacing: -0.01em;
}

.wishlist-slider-desc {
  font-size: 0.84rem;
  color: var(--color-slate-600);
  margin: 0;
}

.wishlist-slider-controls-col {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.wishlist-katalog-pill {
  white-space: nowrap !important;
  font-size: 0.8rem !important;
  padding: 0.42rem 0.85rem !important;
  font-weight: 700 !important;
}

.wishlist-slider-arrows {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.wishlist-slider-arrows .alm-carousel-arrow {
  width: 36px;
  height: 36px;
}

#wishlistPageItems .alm-carousel-track .alm-product-card {
  grid-column: auto !important;
  flex: 0 0 280px;
  min-width: 260px;
  max-width: 300px;
  flex-shrink: 0 !important;
}

@media (max-width: 768px) {
  .wishlist-empty-card {
    padding: 1.15rem 0.85rem !important;
    margin-bottom: 1.25rem !important;
    border-radius: var(--radius-md) !important;
  }
  .wishlist-empty-icon {
    width: 32px !important;
    height: 32px !important;
    margin-bottom: 0.45rem !important;
  }
  .wishlist-empty-icon svg {
    width: 15px !important;
    height: 15px !important;
  }
  .wishlist-empty-title {
    font-size: 1rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.2rem !important;
  }
  .wishlist-empty-desc {
    font-size: 0.74rem !important;
    line-height: 1.38 !important;
    margin-bottom: 0.75rem !important;
  }
  .wishlist-empty-actions {
    gap: 0.4rem !important;
    width: 100% !important;
  }
  .wishlist-cta-btn {
    font-size: 0.72rem !important;
    padding: 0.38rem 0.65rem !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
  .wishlist-slider-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.45rem !important;
    margin-bottom: 0.75rem !important;
  }
  .wishlist-slider-title-col {
    text-align: left !important;
    width: 100% !important;
  }
  .wishlist-slider-title {
    font-size: 1.15rem !important;
    line-height: 1.22 !important;
    margin: 0.2rem 0 0.15rem !important;
  }
  .wishlist-slider-desc {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
    color: var(--color-slate-500) !important;
  }
  .wishlist-slider-controls-col {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    margin-top: 0.2rem !important;
  }
  .wishlist-katalog-pill {
    white-space: nowrap !important;
    font-size: 0.74rem !important;
    padding: 0.32rem 0.7rem !important;
    font-weight: 750 !important;
    min-height: 30px !important;
    line-height: 1 !important;
  }
  .wishlist-slider-arrows {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }
  .wishlist-slider-arrows .alm-carousel-arrow {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    border-radius: 50% !important;
  }
  .wishlist-slider-arrows .alm-carousel-arrow svg {
    width: 14px !important;
    height: 14px !important;
  }
  
  /* Compact mobile product cards in slider (approx 165px wide) */
  #wishlistPageItems .alm-carousel-track {
    gap: 0.55rem !important;
    padding: 0.25rem 0.15rem 0.75rem !important;
  }
  #wishlistPageItems .alm-carousel-track .alm-product-card {
    grid-column: auto !important;
    flex: 0 0 165px !important;
    min-width: 155px !important;
    max-width: 175px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    border: 1px solid rgba(197, 168, 128, 0.22) !important;
    padding: 0 !important;
  }
  #wishlistPageItems .alm-carousel-track .alm-product-card .alm-product-media {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    max-height: 165px !important;
  }
  #wishlistPageItems .alm-carousel-track .alm-product-card .alm-product-body {
    padding: 0.45rem 0.4rem 0.5rem !important;
    gap: 0.2rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  #wishlistPageItems .alm-carousel-track .alm-product-card .alm-product-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.2rem !important;
    margin-bottom: 0.1rem !important;
  }
  #wishlistPageItems .alm-carousel-track .alm-product-card .alm-product-header-row .alm-badge {
    font-size: 0.52rem !important;
    padding: 0.08rem 0.3rem !important;
    max-width: 65% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  #wishlistPageItems .alm-carousel-track .alm-product-card .alm-product-rating {
    font-size: 0.62rem !important;
  }
  #wishlistPageItems .alm-carousel-track .alm-product-card .alm-product-title {
    font-size: 0.74rem !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
    min-height: 2.5em !important;
    max-height: 2.5em !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    margin: 0 0 0.15rem 0 !important;
  }
  #wishlistPageItems .alm-carousel-track .alm-product-card .alm-product-desc,
  #wishlistPageItems .alm-carousel-track .alm-product-card .alm-product-specs,
  #wishlistPageItems .alm-carousel-track .alm-product-card .alm-product-delivery-pill {
    display: none !important;
  }
  #wishlistPageItems .alm-carousel-track .alm-product-card .alm-product-footer {
    border-top: 1px solid rgba(197, 168, 128, 0.15) !important;
    padding-top: 0.3rem !important;
    margin-top: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
  }
  #wishlistPageItems .alm-carousel-track .alm-product-card .alm-product-price {
    font-size: 0.88rem !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    font-family: var(--font-mono) !important;
  }
  #wishlistPageItems .alm-carousel-track .alm-product-card .alm-product-tax-note {
    font-size: 0.52rem !important;
    line-height: 1 !important;
  }
  #wishlistPageItems .alm-carousel-track .alm-product-card .alm-product-footer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1.25fr !important;
    gap: 0.25rem !important;
  }
  #wishlistPageItems .alm-carousel-track .alm-product-card .alm-btn-inspect-spec,
  #wishlistPageItems .alm-carousel-track .alm-product-card .alm-btn-cart-expand {
    height: 28px !important;
    font-size: 0.66rem !important;
    padding: 0 0.25rem !important;
    border-radius: 5px !important;
  }
  #wishlistPageItems .alm-carousel-track .alm-product-card .alm-btn-inspect-spec svg,
  #wishlistPageItems .alm-carousel-track .alm-product-card .alm-btn-cart-expand svg {
    width: 11px !important;
    height: 11px !important;
  }

  /* 2-Column Responsive Saved Products Grid on Mobile */
  #wishlistPageItems {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #wishlistPageItems > .col-12 {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  #wishlistPageItems > .alm-product-card {
    grid-column: span 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    padding: 0 !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(197, 168, 128, 0.22) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-media {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    padding: 0 !important;
    position: relative !important;
    background: #0E1524 !important;
    overflow: hidden !important;
    border-bottom: 1px solid rgba(197, 168, 128, 0.18) !important;
    border-radius: 9px 9px 0 0 !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-media-link {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-media-link img,
  #wishlistPageItems > .alm-product-card .alm-product-media-link svg {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    transform: none !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-media-tag {
    top: 0.35rem !important;
    left: 0.35rem !important;
    padding: 0.12rem 0.35rem !important;
    font-size: 0.55rem !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-wishlist-btn {
    top: 0.35rem !important;
    right: 0.35rem !important;
    width: 28px !important;
    height: 28px !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-wishlist-btn svg {
    width: 13px !important;
    height: 13px !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-hover-actions {
    display: none !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-body {
    padding: 0.42rem 0.38rem 0.45rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    gap: 0.15rem !important;
    box-sizing: border-box !important;
    justify-content: space-between !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-header-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.2rem !important;
    margin-bottom: 0.1rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-header-row .alm-badge {
    font-size: 0.52rem !important;
    font-weight: 750 !important;
    padding: 0.08rem 0.3rem !important;
    border-radius: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 65% !important;
    line-height: 1.15 !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-rating {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.12rem !important;
    color: var(--color-slate-700) !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-rating .rating-count {
    display: none !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-title {
    font-size: 0.72rem !important;
    font-weight: 750 !important;
    line-height: 1.22 !important;
    min-height: 2.44em !important;
    max-height: 2.44em !important;
    margin: 0 0 0.12rem 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-title a {
    color: var(--color-slate-900) !important;
    text-decoration: none !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-desc,
  #wishlistPageItems > .alm-product-card .alm-product-delivery-pill,
  #wishlistPageItems > .alm-product-card .alm-product-specs {
    display: none !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
    padding-top: 0.3rem !important;
    margin-top: auto !important;
    border-top: 1px solid rgba(197, 168, 128, 0.15) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-footer-meta {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-price-stack {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 0.35rem !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-price {
    font-size: 0.95rem !important;
    font-weight: 850 !important;
    font-family: var(--font-mono) !important;
    color: var(--color-slate-900) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-tax-note {
    font-size: 0.52rem !important;
    color: var(--color-slate-500) !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    display: inline-block !important;
  }

  #wishlistPageItems > .alm-product-card .alm-product-footer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1.35fr !important;
    gap: 0.25rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #wishlistPageItems > .alm-product-card .alm-btn-inspect-spec {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.2rem !important;
    height: 28px !important;
    padding: 0 0.3rem !important;
    font-size: 0.66rem !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
  }

  #wishlistPageItems > .alm-product-card .alm-btn-inspect-spec svg {
    width: 11px !important;
    height: 11px !important;
  }

  #wishlistPageItems > .alm-product-card .alm-btn-cart-expand {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.2rem !important;
    height: 28px !important;
    padding: 0 0.3rem !important;
    font-size: 0.66rem !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
  }

  #wishlistPageItems > .alm-product-card .alm-btn-cart-expand .cart-btn-label-full {
    display: none !important;
  }

  #wishlistPageItems > .alm-product-card .alm-btn-cart-expand .cart-btn-label-short {
    display: inline !important;
  }

  #wishlistPageItems > .alm-product-card .alm-btn-cart-expand svg {
    width: 11px !important;
    height: 11px !important;
  }
}

/* ==========================================================================
   UNIVERSAL SITE-WIDE MOBILE TYPOGRAPHY & HEADER SCALING (ALL PAGES)
   Ensures harmonic, proportional, user-friendly text sizes on all phones & tablets
   ========================================================================== */

/* Base Desktop / Global declarations for custom container helpers */
.alm-page-hero-header {
  margin-bottom: 2rem;
}

.alm-legal-card {
  max-width: 820px;
  margin: 0 auto;
  padding: 2.5rem;
}

@media (max-width: 768px) {
  /* 1. Page Hero Headers across all subpages */
  .alm-page-hero-header,
  .alm-cart-page-header,
  .manufaktur-hero-header,
  .expert-hero-header,
  .logistik-hero-header,
  .tracking-hero-header,
  .kundenservice-hero-header,
  .merkzettel-hero-header {
    margin-bottom: 1.15rem !important;
  }

  /* 2. Fluid, Proportionate Heading Hierarchy */
  h1, 
  .alm-hero-title,
  .alm-page-title,
  .alm-section h1,
  .alm-container h1,
  .alm-page-hero-header h1,
  .manufaktur-title,
  .expert-title,
  .logistik-title,
  .tracking-title,
  .kundenservice-title,
  .merkzettel-hero-title {
    font-size: clamp(1.3rem, 5.2vw, 1.62rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.02em !important;
    margin-top: 0.2rem !important;
    margin-bottom: 0.35rem !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: manual !important;
  }

  h2,
  .alm-section h2,
  .alm-container h2,
  .bento-card h2,
  .alm-section-title {
    font-size: clamp(1.12rem, 4.2vw, 1.32rem) !important;
    line-height: 1.25 !important;
    letter-spacing: -0.015em !important;
    margin-top: 0.2rem !important;
    margin-bottom: 0.35rem !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: manual !important;
  }

  h3,
  .alm-section h3,
  .alm-container h3,
  .bento-card h3 {
    font-size: clamp(0.96rem, 3.6vw, 1.1rem) !important;
    line-height: 1.28 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0.25rem !important;
  }

  h4,
  .alm-section h4,
  .alm-container h4,
  .bento-card h4 {
    font-size: clamp(0.86rem, 3vw, 0.95rem) !important;
    line-height: 1.32 !important;
  }

  /* 3. Section Headers Spacing on index.php and subpages */
  .alm-section .alm-container > div[style*="margin-bottom: 2.5rem"],
  .alm-section .alm-container > div[style*="margin-bottom: 3rem"],
  .alm-section .alm-container > div[style*="margin: 0 auto 2.5rem"],
  .alm-section .alm-container > div[style*="margin: 0 auto 3rem"] {
    margin-bottom: 1.15rem !important;
  }

  /* 4. Subtitles & Lead Descriptions directly following H1 / H2 */
  .alm-page-hero-header p,
  .alm-cart-page-header p,
  .manufaktur-subtitle,
  .expert-subtitle,
  .logistik-subtitle,
  .tracking-subtitle,
  .kundenservice-subtitle,
  .merkzettel-hero-subtitle,
  .alm-section .alm-container > div[style*="margin"] > p {
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
    color: var(--color-slate-600) !important;
    margin-bottom: 0.25rem !important;
  }

  /* 5. Badges & Category Tags in Hero Headers */
  .alm-section .alm-badge,
  .alm-badge-cyber,
  .alm-badge-slate,
  .alm-badge-bronze {
    font-size: 0.62rem !important;
    padding: 0.16rem 0.48rem !important;
    letter-spacing: 0.03em !important;
    line-height: 1.2 !important;
  }

  /* 6. Legal Pages (Datenschutz, AGB, Impressum, Widerruf) */
  .alm-legal-card {
    padding: 1.25rem 1rem !important;
    margin: 0 auto 1.5rem !important;
    border-radius: 14px !important;
  }
  .alm-legal-card h1 {
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    margin-bottom: 0.85rem !important;
  }
  .alm-legal-card h2 {
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    margin: 1.15rem 0 0.4rem !important;
  }
  .alm-legal-card p,
  .alm-legal-card li {
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
    color: var(--color-slate-700) !important;
  }
  .alm-legal-card .alm-badge {
    font-size: 0.62rem !important;
    margin-bottom: 0.5rem !important;
  }

  /* 7. Product & Journal Card titles */
  .alm-product-card-title,
  .alm-product-title,
  .journal-card-title {
    font-size: 0.86rem !important;
    line-height: 1.28 !important;
  }

  /* 8. General Section Vertical Spacing */
  .alm-section {
    padding-top: 1.5rem !important;
    padding-bottom: 1.75rem !important;
  }
}

@media (max-width: 480px) {
  h1, 
  .alm-hero-title,
  .alm-page-hero-header h1 {
    font-size: 1.28rem !important;
    line-height: 1.22 !important;
  }

  h2,
  .alm-section h2,
  .alm-section-title {
    font-size: 1.12rem !important;
    line-height: 1.25 !important;
  }

  p,
  .alm-page-hero-header p {
    font-size: 0.82rem !important;
    line-height: 1.42 !important;
  }
}

/* ==========================================================================
   CHECKOUT & ORDER CONFIRMATION SUMMARY ITEMS (kasse-diskret.html & bestellung-bestaetigt.html)
   ========================================================================== */
.checkout-summary-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.checkout-summary-item {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
  transition: background-color 0.15s ease;
}

.checkout-summary-item:last-child {
  border-bottom: none;
  padding-bottom: 0.25rem;
}

.checkout-summary-thumb-wrap {
  position: relative;
  flex-shrink: 0;
}

.checkout-summary-thumb {
  width: 66px;
  height: 66px;
  border-radius: 10px;
  background: radial-gradient(circle at 50% 50%, #172134 0%, #0a0f1a 100%);
  border: 1px solid rgba(197, 168, 128, 0.35);
  box-shadow: 0 2px 8px rgba(10, 15, 26, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 2px;
  box-sizing: border-box;
}

.checkout-summary-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  border-radius: 7px;
  transition: transform 0.2s ease;
}

.checkout-summary-item:hover .checkout-summary-thumb img {
  transform: scale(1.05);
}

.checkout-summary-qty-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  background: #C5A880;
  color: #0E1524;
  font-family: var(--font-mono, 'SF Mono', Consolas, monospace);
  font-size: 0.68rem;
  font-weight: 850;
  min-width: 20px;
  height: 20px;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  border: 1.5px solid #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  line-height: 1;
  z-index: 2;
}

.checkout-summary-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.checkout-summary-title {
  font-size: 0.88rem;
  font-weight: 750;
  color: var(--color-slate-900, #0E1524);
  line-height: 1.25;
  margin-bottom: 0.22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.checkout-summary-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 0.5rem;
  font-size: 0.72rem;
  line-height: 1.2;
}

.checkout-summary-sku {
  color: var(--color-slate-500, #64748B);
  font-family: var(--font-mono, monospace);
  font-weight: 650;
  letter-spacing: 0.02em;
}

.checkout-summary-variant {
  display: inline-flex;
  align-items: center;
  padding: 0.1rem 0.38rem;
  background: rgba(197, 168, 128, 0.15);
  color: #8F6F3A;
  border: 1px solid rgba(197, 168, 128, 0.28);
  border-radius: 4px;
  font-size: 0.68rem;
  font-weight: 650;
}

.checkout-summary-unit-price {
  color: var(--color-slate-400, #94A3B8);
  font-family: var(--font-mono, monospace);
  font-size: 0.7rem;
}

.checkout-summary-price {
  font-family: var(--font-mono, 'SF Mono', Consolas, monospace);
  font-size: 0.95rem;
  font-weight: 850;
  color: var(--color-slate-900, #0E1524);
  white-space: nowrap;
  flex-shrink: 0;
  text-align: right;
  padding-left: 0.5rem;
}

@media (max-width: 480px) {
  .checkout-summary-thumb {
    width: 48px;
    height: 48px;
  }
  .checkout-summary-title {
    font-size: 0.82rem;
  }
  .checkout-summary-price {
    font-size: 0.88rem;
  }
}

/* ==========================================================================
   DISCRETE CHECKOUT ERGONOMIC FORM (kasse-diskret.html)
   ========================================================================== */
.checkout-card {
  padding: 1.5rem 1.75rem !important;
  border-radius: var(--radius-lg, 16px) !important;
  background: #ffffff !important;
  border: 1px solid rgba(197, 168, 128, 0.3) !important;
  box-shadow: 0 4px 20px rgba(15, 23, 42, 0.04) !important;
}

.discrete-checkout-form {
  display: flex;
  flex-direction: column;
}

.checkout-form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07);
}

.checkout-form-title {
  font-size: 1.12rem !important;
  font-weight: 800 !important;
  color: var(--color-slate-900, #0E1524) !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

.checkout-form-badge {
  font-family: var(--font-mono, monospace);
  font-size: 0.68rem;
  font-weight: 750;
  color: #065F46;
  background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.28);
  padding: 0.18rem 0.55rem;
  border-radius: 9999px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.discrete-checkout-form .alm-form-group {
  margin-bottom: 0.72rem !important;
  gap: 0.22rem !important;
}

.discrete-checkout-form .alm-label {
  font-size: 0.79rem !important;
  font-weight: 700 !important;
  color: #334155 !important;
  margin-bottom: 0 !important;
  line-height: 1.2 !important;
}

.discrete-checkout-form .alm-input {
  height: 42px !important;
  min-height: 42px !important;
  padding: 0.55rem 0.85rem !important;
  font-size: 0.89rem !important;
  border-radius: 8px !important;
  border: 1.5px solid rgba(197, 168, 128, 0.42) !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
  transition: all 0.2s ease !important;
}

.discrete-checkout-form .alm-input:focus {
  border-color: #C5A880 !important;
  box-shadow: 0 0 0 3px rgba(197, 168, 128, 0.22), 0 2px 8px rgba(15, 23, 42, 0.06) !important;
  background-color: #ffffff !important;
}

.checkout-form-grid-name {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.checkout-form-grid-city {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 0.75rem;
}

.checkout-security-strip {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.65rem !important;
  margin: 0.75rem 0 1.15rem !important;
  padding: 0.65rem 0.85rem !important;
  font-size: 0.76rem !important;
  line-height: 1.4 !important;
  background: #FCFAF7 !important;
  border: 1px solid rgba(197, 168, 128, 0.32) !important;
  border-radius: 8px !important;
  color: #475569 !important;
}

.checkout-security-icon {
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.checkout-submit-btn {
  padding: 0.85rem 1.25rem !important;
  font-size: 0.96rem !important;
  font-weight: 800 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(197, 168, 128, 0.3) !important;
  letter-spacing: -0.01em !important;
}

@media (max-width: 640px) {
  .checkout-card {
    padding: 1.15rem 1rem !important;
  }
  .checkout-form-grid-name {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
  }
  .checkout-form-grid-city {
    grid-template-columns: 95px 1fr !important;
    gap: 0.5rem !important;
  }
  .discrete-checkout-form .alm-form-group {
    margin-bottom: 0.65rem !important;
  }
  .discrete-checkout-form .alm-input {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.86rem !important;
  }
}

/* ==========================================================================
   DESKTOP PROPORTIONS FOR EMPTY STATE WINDOWS (Cart & Wishlist)
   Mobile / Phone mode remains completely untouched (max-width <= 768px).
   ========================================================================== */
@media (min-width: 992px) {
  /* 1. Empty Cart Desktop Proportions (warenkorb.html) */
  .alm-cart-empty-card {
    max-width: 1060px !important;
    margin: 2.5rem auto 3.75rem !important;
    padding: 3.85rem 3.5rem 3.25rem !important;
    border-radius: var(--radius-2xl, 24px) !important;
    box-shadow: 0 10px 36px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  }

  .alm-cart-empty-icon-wrap {
    width: 72px !important;
    height: 72px !important;
    margin-bottom: 1.25rem !important;
  }

  .alm-cart-empty-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .empty-icon-sparkle {
    font-size: 0.95rem !important;
  }

  .alm-cart-empty-badge {
    font-size: 0.68rem !important;
    padding: 0.3rem 0.85rem !important;
    margin-bottom: 0.75rem !important;
  }

  .alm-cart-empty-title {
    font-size: 1.95rem !important;
    margin-bottom: 0.65rem !important;
    letter-spacing: -0.025em !important;
  }

  .alm-cart-empty-desc {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    max-width: 660px !important;
    margin: 0 auto 1.85rem !important;
  }

  .alm-cart-empty-actions {
    max-width: 540px !important;
    margin-bottom: 1.85rem !important;
  }

  .alm-cart-empty-cta {
    padding: 0.95rem 2.4rem !important;
    font-size: 1rem !important;
  }

  .alm-cart-empty-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    max-width: 960px !important;
    gap: 1rem !important;
    margin: 0.75rem 0 1.75rem !important;
  }

  .alm-cart-grid-card {
    padding: 0.95rem 1.15rem !important;
    border-radius: 14px !important;
    gap: 0.75rem !important;
  }

  .grid-card-icon {
    font-size: 1.5rem !important;
  }

  .grid-card-text strong {
    font-size: 0.88rem !important;
    margin-bottom: 0.2rem !important;
  }

  .grid-card-text small {
    font-size: 0.74rem !important;
  }

  .alm-cart-empty-trust {
    font-size: 0.82rem !important;
    gap: 1.35rem !important;
    margin-top: 1rem !important;
  }

  /* 2. Empty Wishlist Desktop Proportions (merkzettel.html) */
  .wishlist-empty-card {
    max-width: 1060px !important;
    margin: 1.75rem auto 3.75rem !important;
    padding: 3.85rem 3.5rem 3.25rem !important;
    border-radius: var(--radius-2xl, 24px) !important;
    box-shadow: 0 10px 36px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.02) !important;
  }

  .wishlist-empty-icon {
    width: 72px !important;
    height: 72px !important;
    margin-bottom: 1.25rem !important;
  }

  .wishlist-empty-icon svg {
    width: 32px !important;
    height: 32px !important;
  }

  .wishlist-empty-title {
    font-size: 1.95rem !important;
    font-weight: 850 !important;
    color: var(--color-slate-900) !important;
    margin-bottom: 0.65rem !important;
    letter-spacing: -0.025em !important;
  }

  .wishlist-empty-desc {
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    max-width: 660px !important;
    margin: 0 auto 2rem !important;
    color: var(--color-slate-600) !important;
  }

  .wishlist-empty-actions {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 1.25rem !important;
    width: 100% !important;
    max-width: 580px !important;
    margin: 0 auto !important;
  }

  .wishlist-cta-btn {
    padding: 0.95rem 2.4rem !important;
    font-size: 0.98rem !important;
    font-weight: 750 !important;
    border-radius: var(--radius-pill, 9999px) !important;
  }
}