/* ==========================================================================
   kyolook — Pure Monolith Design System: Warm Botanical & Bio-Ergonomics
   Style 4: Soft Sage (#4A6B62), Linen Sand (#F5F2EB), Warm Terracotta (#D97757), Forest Moss (#24332C)
   Typography: DM Sans + Serif Headings (Playfair Display / Georgia)
   Radii: 20px (Organic Soft Bento)
   HWG-Compliant & DSGVO-Ready
   ========================================================================== */

:root {
  /* Brand Palette — Rich Authentic German Botanical Luxury & Biotech Precision */
  --color-sage: #3D6657;
  --color-sage-light: #52806F;
  --color-sage-ultra-light: #EBF4F0;
  --color-moss: #0E1B15;
  --color-moss-deep: #07120D;
  --color-sand: #F7F4EB;
  --color-sand-warm: #FAF7F0;
  --color-sand-card: #FFFFFF;
  --color-sand-muted: #E5DFC8;
  --color-terracotta: #D25427;
  --color-terracotta-hover: #B94319;
  --color-terracotta-soft: #FDF1EA;
  --color-terracotta-glow: rgba(210, 84, 39, 0.35);
  --color-gold: #D4A346;
  --color-gold-soft: #FBF5E8;
  --color-emerald-deep: #091C13;

  /* Vibrant Biotech Neon Accents */
  --color-neon-mint: #00F5A0;
  --color-neon-cyan: #00E5FF;
  --color-neon-amber: #FF8A00;
  --color-neon-glow-mint: 0 0 16px rgba(0, 245, 160, 0.6), 0 0 32px rgba(0, 245, 160, 0.3);
  --color-neon-glow-cyan: 0 0 16px rgba(0, 229, 255, 0.6), 0 0 32px rgba(0, 229, 255, 0.3);
  --color-neon-glow-amber: 0 0 16px rgba(255, 138, 0, 0.6), 0 0 32px rgba(255, 138, 0, 0.3);
  --gradient-botanical: linear-gradient(135deg, #1F2D26 0%, #122820 100%);
  --gradient-terracotta: linear-gradient(135deg, #C85A32 0%, #E27952 100%);
  --gradient-hero-card: linear-gradient(180deg, #FBF9F4 0%, #F1EDE3 100%);
  --color-text-primary: #17251E;
  --color-text-secondary: #364840;
  --color-text-muted: #566760;
  --color-border: rgba(36, 51, 44, 0.12);
  --color-border-light: rgba(36, 51, 44, 0.06);
  --color-danger: #D32F2F;
  --color-danger-bg: #FDEDED;
  --color-success: #2E7D32;
  --color-success-bg: #E8F5E9;

  /* Typography */
  --font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-mono: 'SF Mono', Consolas, Menlo, Monaco, monospace;

  /* Organic Bento Radii */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-subtle: 0 2px 10px rgba(36, 51, 44, 0.04);
  --shadow-card: 0 8px 30px rgba(36, 51, 44, 0.06);
  --shadow-hover: 0 16px 40px rgba(36, 51, 44, 0.10);
  --shadow-modal: 0 24px 60px rgba(24, 35, 30, 0.25);

  /* Layout */
  --container-max: 1340px;
  --header-height: 80px;
  --transition-fast: 0.18s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-smooth: 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-sand-warm);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
}

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

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

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

/* ----------------- TYPOGRAPHY ----------------- */
h1, h2, h3, h4, .kyo-font-serif {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.22;
  color: var(--color-moss);
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1 { font-size: clamp(1.75rem, 3vw + 0.5rem, 2.5rem); letter-spacing: -0.015em; line-height: 1.18; }
h2 { font-size: clamp(1.35rem, 2vw + 0.45rem, 1.95rem); letter-spacing: -0.01em; line-height: 1.24; }
h3 { font-size: clamp(1.08rem, 1.3vw + 0.35rem, 1.42rem); line-height: 1.3; }
h4 { font-size: clamp(0.94rem, 0.8vw + 0.35rem, 1.12rem); line-height: 1.35; }

p {
  color: var(--color-text-secondary);
  font-size: clamp(0.88rem, 0.25vw + 0.72rem, 1rem);
  line-height: clamp(1.5, 0.2vw + 1.45, 1.68);
  text-wrap: pretty;
  overflow-wrap: break-word;
}

.kyo-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-sage);
  background-color: var(--color-sage-ultra-light);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  margin-bottom: 0.75rem;
}

.kyo-hwg-notice {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  line-height: 1.45;
  border-left: 2px solid var(--color-sage);
  padding-left: 0.75rem;
  margin-top: 0.75rem;
}

/* ----------------- CONTAINER & GRID ----------------- */
.kyo-container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* Bento Grid System */
.kyo-bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

.kyo-bento-card {
  background-color: var(--color-sand-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: clamp(1.25rem, 1.8vw + 0.5rem, 2.25rem);
  box-shadow: var(--shadow-card);
  transition: transform var(--transition-smooth), box-shadow var(--transition-smooth), border-color var(--transition-smooth);
  position: relative;
  overflow: hidden;
  min-width: 0;
}

.kyo-bento-card:hover {
  border-color: rgba(74, 107, 98, 0.3);
  box-shadow: var(--shadow-hover);
}

.kyo-bento-card--organic {
  background: linear-gradient(145deg, #FFFFFF, var(--color-sand));
}

.kyo-bento-card--dark {
  background-color: var(--color-moss);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.1);
}

.kyo-bento-card--dark h2,
.kyo-bento-card--dark h3,
.kyo-bento-card--dark h4 {
  color: #FFFFFF;
}

.kyo-bento-card--dark p {
  color: rgba(255, 255, 255, 0.82);
}

/* Span classes */
.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; }

@media (max-width: 992px) {
  .col-8, .col-7, .col-6, .col-5, .col-4, .col-3 {
    grid-column: span 12;
  }
}

/* ----------------- BUTTONS ----------------- */
.kyo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.4rem, 0.4vw, 0.65rem);
  padding: clamp(0.62rem, 0.4vw + 0.42rem, 0.85rem) clamp(0.95rem, 0.8vw + 0.55rem, 1.6rem);
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: clamp(0.82rem, 0.25vw + 0.72rem, 0.95rem);
  cursor: pointer;
  border: 1px solid transparent;
  transition: all var(--transition-fast);
  text-align: center;
  white-space: nowrap;
  min-height: clamp(42px, 2.5vw + 32px, 48px);
}

.kyo-btn-primary {
  background-color: var(--color-terracotta);
  color: #FFFFFF;
  border-color: var(--color-terracotta);
}

.kyo-btn-primary:hover {
  background-color: var(--color-terracotta-hover);
  border-color: var(--color-terracotta-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(217, 119, 87, 0.35);
}

.kyo-btn-sage {
  background-color: var(--color-sage);
  color: #FFFFFF;
  border-color: var(--color-sage);
}

.kyo-btn-sage:hover {
  background-color: var(--color-moss);
  border-color: var(--color-moss);
  transform: translateY(-1px);
}

.kyo-btn-secondary {
  background-color: #FFFFFF;
  color: var(--color-moss);
  border-color: var(--color-border);
}

.kyo-btn-secondary:hover {
  background-color: var(--color-sand);
  border-color: var(--color-sage);
}

.kyo-btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  min-height: 38px;
}

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

/* ----------------- HEADER & NAVIGATION ----------------- */
.kyo-topbar {
  background-color: var(--color-moss);
  color: #EDE8DE;
  font-size: 0.78rem;
  padding: 0.5rem 0;
  text-align: center;
}

.kyo-topbar-extra {
  display: none;
  margin-left: 1rem;
  font-size: 0.78rem;
  opacity: 0.9;
}

@media (min-width: 768px) {
  .kyo-topbar-extra {
    display: inline-block;
  }
}

.kyo-topbar a {
  color: var(--color-gold);
  text-decoration: underline;
  margin-left: 0.5rem;
}

/* 4. HEADER & TWO-TIER LUXURY NAVIGATION */
.kyo-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1000;
  background-color: rgba(250, 248, 245, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, background-color 0.25s ease;
}

.kyo-header.is-scrolled {
  box-shadow: 0 4px 20px rgba(27, 42, 33, 0.12) !important;
  background-color: rgba(255, 255, 255, 0.98) !important;
}

/* Tier 1: Main Bar (Logo, Central Search, Trust & Actions) */
.kyo-header-main {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border-light);
}

.kyo-header-main-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.kyo-brand-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}

.kyo-brand-logo img {
  height: 44px;
  width: auto;
  display: block;
}

.kyo-header-search {
  flex: 1;
  max-width: 460px;
  margin: 0 1rem;
  position: relative;
}

.kyo-header-search .kyo-search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.kyo-search-icon {
  position: absolute;
  left: 1.1rem;
  color: var(--color-text-muted);
  pointer-events: none;
  z-index: 2;
}

.kyo-header-search .kyo-search-input {
  width: 100%;
  padding: 0.65rem 1.25rem 0.65rem 2.65rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: #FFFFFF;
  font-size: 0.88rem;
  color: var(--color-moss);
  transition: all var(--transition-fast);
}

.kyo-header-search .kyo-search-input:focus {
  outline: none;
  border-color: var(--color-sage);
  box-shadow: 0 0 0 3px rgba(74, 107, 98, 0.12);
}

.kyo-header-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--color-moss);
  background: rgba(74, 107, 98, 0.08);
  border: 1px solid rgba(74, 107, 98, 0.16);
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.pulse-dot-sm {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2E7D32;
  box-shadow: 0 0 6px #4ADE80;
}

/* Tier 2: Secondary Navigation Bar (Placed directly UNDER the Logo) */
.kyo-header-subnav {
  background: rgba(255, 255, 255, 0.88);
  border-top: 1px solid var(--color-border-light);
  border-bottom: 1px solid var(--color-border-light);
  transition: all var(--transition-fast);
}

.kyo-nav-links {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 0.5rem;
  flex-wrap: nowrap;
}

.kyo-nav-link {
  font-size: clamp(0.82rem, 0.35vw + 0.54rem, 0.94rem);
  font-weight: 650;
  letter-spacing: 0.012em;
  color: var(--color-moss);
  padding: 0.75rem clamp(0.45rem, 0.4vw, 0.75rem);
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: clamp(0.25rem, 0.3vw, 0.45rem);
  white-space: nowrap;
  text-decoration: none;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.kyo-nav-link:hover {
  color: var(--color-terracotta);
  background-color: rgba(210, 84, 39, 0.04);
}

.kyo-nav-link.active {
  color: var(--color-terracotta) !important;
  font-weight: 750 !important;
  background-color: rgba(210, 84, 39, 0.08);
}

.kyo-nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  right: 50%;
  height: 3px;
  background-color: var(--color-terracotta);
  border-radius: 3px 3px 0 0;
  transition: all var(--transition-fast);
}

.kyo-nav-link:hover::after, .kyo-nav-link.active::after {
  left: 0;
  right: 0;
}

.kyo-nav-link.active::after {
  box-shadow: 0 -1px 4px rgba(210, 84, 39, 0.35);
}

.kyo-nav-badge-pill {
  background: var(--color-terracotta);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.18rem 0.52rem;
  border-radius: var(--radius-full);
  line-height: 1;
}

/* Actions & Icon Buttons */
.kyo-nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-shrink: 0;
}

.kyo-icon-btn {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  transition: all var(--transition-fast);
  color: var(--color-moss);
  text-decoration: none;
}

.kyo-icon-btn:hover {
  background-color: var(--color-sand);
  border-color: var(--color-sage);
  color: var(--color-terracotta);
}

.kyo-icon-btn.active {
  background-color: rgba(210, 84, 39, 0.1);
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
  box-shadow: 0 0 0 2px rgba(210, 84, 39, 0.18);
}

.kyo-badge-counter {
  position: absolute;
  top: -4px;
  right: -4px;
  background-color: var(--color-terracotta);
  color: #FFFFFF;
  font-size: 0.7rem;
  font-weight: 700;
  min-width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

/* Mobile Menu Toggle */
.kyo-mobile-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-moss);
}

@media (max-width: 992px) {
  .kyo-header-search {
    display: none;
  }
  .kyo-header-trust-badge {
    display: none;
  }
  .kyo-mobile-toggle {
    display: block;
  }
  .kyo-header-subnav {
    display: none;
    background: #FAF8F5;
    border-top: 1px solid var(--color-border);
    padding: 1rem 1.5rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.08);
  }
  .kyo-header-subnav.is-mobile-open {
    display: block;
  }
  .kyo-nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    overflow-x: visible;
  }
  .kyo-nav-link {
    font-size: 0.95rem;
    padding: 0.65rem 0.85rem;
    width: 100%;
    border-bottom: 1px solid var(--color-border-light);
    border-radius: var(--radius-sm);
  }
  .kyo-nav-link.active {
    background: rgba(210, 84, 39, 0.08) !important;
    color: var(--color-terracotta) !important;
    font-weight: 750 !important;
    border-left: 4px solid var(--color-terracotta);
    border-bottom: 1px solid var(--color-border-light);
  }
  .kyo-nav-link.active::after {
    display: none;
  }
}

/* Hide off-canvas mobile drawer on desktop */
.kyo-mobile-drawer-overlay,
.kyo-mobile-drawer {
  display: none;
}

/* ----------------- SEARCH DROPDOWN ----------------- */
.kyo-search-box {
  position: relative;
}

.kyo-search-input-wrap {
  display: flex;
  align-items: center;
  position: relative;
}

.kyo-search-input {
  width: 220px;
  padding: 0.6rem 2.2rem 0.6rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: #FFFFFF;
  font-size: 0.88rem;
  transition: width var(--transition-smooth), border-color var(--transition-fast);
}

.kyo-search-input:focus {
  outline: none;
  width: 280px;
  border-color: var(--color-sage);
}

.kyo-search-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  width: 100%;
  min-width: 360px;
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
  z-index: 200;
  display: none;
  max-height: 420px;
  overflow-y: auto;
}

.kyo-search-dropdown.open {
  display: block;
}

.kyo-search-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border-light);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.kyo-search-item:hover {
  background-color: var(--color-sand);
}

.kyo-search-item img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 6px;
  background-color: var(--color-sand);
  border: 1px solid var(--color-border-light);
  flex-shrink: 0;
}

.kyo-search-item-info {
  flex-grow: 1;
  min-width: 0;
}

.kyo-search-item-sku {
  font-size: 0.7rem;
  color: var(--color-sage);
  font-weight: 600;
  text-transform: uppercase;
}

.kyo-search-item-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-moss);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kyo-search-item-price {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-terracotta);
}

/* ----------------- HERO SECTION ----------------- */
.kyo-hero {
  padding: 2rem 0 2.5rem;
  position: relative;
  overflow: hidden;
}

.kyo-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--color-sand-card);
  border: 1px solid var(--color-border);
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  font-size: 0.78rem;
  color: var(--color-sage);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.85rem;
}

.kyo-hero-title {
  font-size: clamp(1.75rem, 2.5vw + 0.8rem, 2.65rem);
  line-height: 1.18;
  margin-bottom: 0.85rem;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.kyo-hero-subtitle {
  font-size: clamp(0.88rem, 0.35vw + 0.74rem, 1.05rem);
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin-bottom: 1.35rem;
  max-width: 600px;
  text-wrap: pretty;
}

.kyo-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.35rem;
}

.kyo-hero-usp-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  padding-top: 1.15rem;
  border-top: 1px solid var(--color-border);
}

.kyo-usp-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-moss);
}

.kyo-usp-item svg {
  color: var(--color-sage);
  flex-shrink: 0;
}

/* ----------------- INTERACTIVE PRESSURE MAP COMPONENT ----------------- */
.kyo-pressure-widget {
  background-color: var(--color-moss);
  color: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  margin: 3.5rem 0;
  box-shadow: var(--shadow-card);
}

.kyo-pressure-controls {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  background-color: var(--color-moss-deep);
  padding: 0.35rem;
  border-radius: var(--radius-full);
  display: inline-flex;
}

.kyo-pressure-tab {
  background: none;
  border: none;
  color: #A9B8B1;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.5rem 1.2rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.kyo-pressure-tab.active {
  background-color: var(--color-sage);
  color: #FFFFFF;
}

.kyo-pressure-display {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: center;
}

@media (max-width: 860px) {
  .kyo-pressure-display {
    grid-template-columns: 1fr;
  }
}

.kyo-pressure-visual {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background-color: #07130E !important;
  padding: 0.5rem !important;
  text-align: center;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4);
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.kyo-pressure-visual img {
  border-radius: var(--radius-md);
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 10 !important;
  max-height: clamp(250px, 34vw, 420px) !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
  margin: 0 auto !important;
}

.kyo-pressure-info h3 {
  color: #FFFFFF;
  margin-bottom: 0.75rem;
}

.kyo-pressure-info p {
  color: #D3DED9;
  margin-bottom: 1rem;
  font-size: 0.95rem;
}

.kyo-metric-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--radius-sm);
  font-size: 0.82rem;
  font-weight: 600;
}

.kyo-metric-bad {
  background-color: rgba(211, 47, 47, 0.2);
  color: #FFB4AB;
  border: 1px solid rgba(211, 47, 47, 0.4);
}

.kyo-metric-good {
  background-color: rgba(46, 125, 50, 0.25);
  color: #A7E4CD;
  border: 1px solid rgba(74, 107, 98, 0.5);
}

/* ----------------- INTERACTIVE QUIZ (3 STEPS) ----------------- */
.kyo-quiz-box {
  background-color: var(--color-sand-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2.75rem;
  box-shadow: var(--shadow-card);
  margin: 3.5rem 0;
}

.kyo-quiz-progress-bar {
  height: 6px;
  background-color: var(--color-sand-muted);
  border-radius: var(--radius-full);
  margin-bottom: 2rem;
  overflow: hidden;
}

.kyo-quiz-progress-fill {
  height: 100%;
  background-color: var(--color-sage);
  width: 33.33%;
  transition: width var(--transition-smooth);
}

.kyo-quiz-step {
  display: none;
}

.kyo-quiz-step.active {
  display: block;
  animation: fadeIn 0.3s ease;
}

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

.kyo-quiz-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  margin: 1.75rem 0;
}

.kyo-quiz-option {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  cursor: pointer;
  background-color: #FFFFFF;
  transition: all var(--transition-fast);
  text-align: left;
}

.kyo-quiz-option:hover {
  border-color: var(--color-sage);
  background-color: var(--color-sand-warm);
}

.kyo-quiz-option.selected {
  border-color: var(--color-terracotta);
  background-color: var(--color-terracotta-soft);
}

.kyo-quiz-option h4 {
  margin-bottom: 0.35rem;
  color: var(--color-moss);
  font-size: clamp(0.95rem, 0.35vw + 0.78rem, 1.12rem);
  line-height: 1.3;
}

.kyo-quiz-option p {
  font-size: clamp(0.78rem, 0.2vw + 0.68rem, 0.86rem);
  color: var(--color-text-secondary);
  line-height: 1.45;
}

.kyo-quiz-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-light);
}

/* Quiz Result Layout (3 Blocks: Leitmodul, Synergie, Paket) */
.kyo-quiz-results {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .kyo-quiz-results {
    grid-template-columns: 1fr;
  }
}

.kyo-quiz-result-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  background-color: #FFFFFF;
  display: flex;
  flex-direction: column;
  position: relative;
}

.kyo-quiz-result-card--featured {
  border-color: var(--color-terracotta);
  background-color: var(--color-terracotta-soft);
  box-shadow: var(--shadow-card);
}

.kyo-quiz-result-card .kyo-result-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: var(--color-sage);
  color: #FFF;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
}

.kyo-quiz-result-card--featured .kyo-result-badge {
  background-color: var(--color-terracotta);
}

/* ----------------- PRODUCT CARDS (CATALOG & SHOWCASE) ----------------- */
.kyo-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.75rem;
  margin: 2.5rem 0;
}

.kyo-product-card {
  background-color: var(--color-sand-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-smooth);
  display: flex;
  flex-direction: column;
  position: relative;
}

.kyo-product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(74, 107, 98, 0.35);
}

.kyo-product-thumb {
  position: relative;
  background-color: var(--color-sand);
  padding: 0;
  text-align: center;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--color-border-light);
}

.kyo-product-thumb a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}

.kyo-product-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

.kyo-product-card:hover .kyo-product-thumb img {
  transform: scale(1.05);
}

.kyo-product-badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  background-color: rgba(36, 51, 44, 0.88);
  color: #F5F2EB;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-full);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 2;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.12);
  pointer-events: none;
}

.kyo-wishlist-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
  color: var(--color-text-muted);
  z-index: 2;
}

.kyo-wishlist-toggle:hover, .kyo-wishlist-toggle.active {
  color: var(--color-terracotta);
  border-color: var(--color-terracotta);
}

.kyo-wishlist-toggle.active svg {
  fill: var(--color-terracotta);
  animation: kyoHeartPop 0.35s ease;
}

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

.kyo-product-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.kyo-product-sku {
  font-size: clamp(0.68rem, 0.15vw + 0.62rem, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-sage);
  margin-bottom: 0.35rem;
}

.kyo-product-title {
  font-size: clamp(0.96rem, 0.4vw + 0.78rem, 1.15rem);
  font-weight: 700;
  color: var(--color-moss);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.kyo-product-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.kyo-product-title a:hover {
  color: var(--color-sage);
}

.kyo-product-desc {
  font-size: clamp(0.78rem, 0.2vw + 0.7rem, 0.88rem);
  color: var(--color-text-secondary);
  line-height: 1.48;
  margin-bottom: 1.25rem;
  flex-grow: 1;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.kyo-product-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border-light);
}

.kyo-product-price {
  font-size: clamp(1.05rem, 0.5vw + 0.82rem, 1.25rem);
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-moss);
}

.kyo-product-price-striked {
  font-size: 0.85rem;
  text-decoration: line-through;
  color: var(--color-text-muted);
  margin-right: 0.4rem;
}

/* ----------------- PRODUCT DETAIL PAGE (.kyo-detail-price-box UX) ----------------- */
.kyo-detail-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-sage);
  margin-bottom: 1.5rem;
  transition: transform var(--transition-fast);
}

.kyo-detail-back-link:hover {
  transform: translateX(-4px);
  color: var(--color-moss);
}

/* ----------------- MODERN PRODUCT DETAIL PAGE (PDP) UX ----------------- */
.kyo-pdp-container {
  max-width: 1200px;
  margin: 0 auto;
}

.kyo-pdp-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.kyo-detail-back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-sage);
  transition: transform var(--transition-fast), color var(--transition-fast);
}

.kyo-detail-back-link:hover {
  transform: translateX(-4px);
  color: var(--color-moss);
}

.kyo-pdp-breadcrumb {
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

/* Hero 2-Column Grid (Zero Empty Space) */
.kyo-pdp-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 2.75rem;
  align-items: start;
}

.kyo-pdp-visual-col {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.kyo-gallery-main {
  background-color: #FAF8F5;
  border-radius: var(--radius-xl);
  padding: 1.25rem;
  position: relative;
  text-align: center;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-card);
}

.kyo-gallery-main img {
  width: 100%;
  max-width: 100%;
  max-height: 480px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin: 0 auto;
  display: block;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.kyo-pdp-badge {
  position: absolute;
  top: 1.85rem;
  left: 1.85rem;
  z-index: 2;
}

.kyo-pdp-trust-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: var(--shadow-subtle);
}

.kyo-pdp-trust-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.kyo-pdp-trust-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}

.kyo-pdp-trust-item strong {
  display: block;
  font-size: 0.86rem;
  color: var(--color-moss);
  margin-bottom: 0.15rem;
}

.kyo-pdp-trust-item p {
  margin: 0;
  font-size: 0.76rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* Buy Column */
.kyo-pdp-buy-col {
  display: flex;
  flex-direction: column;
}

.kyo-pdp-title {
  margin: 0.35rem 0 0.45rem 0;
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
  line-height: 1.2;
  color: var(--color-moss);
}

.kyo-pdp-subtitle {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-sage);
  margin: 0 0 1rem 0;
  line-height: 1.45;
}

.kyo-pdp-meta-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}

.kyo-pdp-sku-badge {
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--color-moss);
  background: var(--color-sand);
  padding: 0.22rem 0.65rem;
  border-radius: var(--radius-full);
}

.kyo-pdp-stock-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--color-success);
  font-weight: 650;
}

.kyo-stock-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  display: inline-block;
  box-shadow: 0 0 6px #10B981;
}

.kyo-pdp-delivery-badge {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  font-weight: 500;
  padding-left: 0.5rem;
  border-left: 1px solid var(--color-border);
}

/* Benefits Grid */
.kyo-pdp-benefits-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
  margin-bottom: 1.35rem;
}

.kyo-pdp-benefit-card {
  background: var(--color-sand-warm);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.85rem;
  transition: all var(--transition-fast);
}

.kyo-pdp-benefit-card:hover {
  background: #FFFFFF;
  border-color: var(--color-sage);
}

.kyo-pdp-benefit-title {
  font-size: 0.84rem;
  font-weight: 750;
  color: var(--color-moss);
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.kyo-pdp-benefit-desc {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.38;
}

/* Tier Selector */
.kyo-pdp-tier-section {
  margin-bottom: 0.85rem;
}

.kyo-pdp-tier-label {
  font-size: 0.86rem;
  font-weight: 750;
  color: var(--color-moss);
  margin-bottom: 0.45rem;
  display: block;
}

.kyo-tier-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.65rem;
}

.kyo-tier-option {
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 0.65rem;
  cursor: pointer;
  text-align: center;
  background-color: #FFFFFF;
  transition: all var(--transition-fast);
}

.kyo-tier-option:hover {
  border-color: var(--color-sage);
}

.kyo-tier-option.selected {
  border-color: var(--color-terracotta);
  background-color: var(--color-terracotta-soft);
}

.kyo-tier-qty {
  font-size: 0.85rem;
  font-weight: 750;
  color: var(--color-moss);
}

.kyo-tier-sub {
  font-size: 0.76rem;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.kyo-tier-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 800;
  padding: 0.12rem 0.48rem;
  border-radius: var(--radius-full);
  background-color: var(--color-terracotta);
  color: #FFF;
  margin-top: 0.25rem;
}

/* Price Box */
.kyo-detail-price-box {
  background-color: #FAF8F5;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.15rem 1.35rem;
  margin: 0.85rem 0 1.15rem;
  box-shadow: var(--shadow-subtle);
}

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

.kyo-pdp-price-wrap {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
}

.kyo-detail-price-current {
  font-family: var(--font-mono);
  font-size: 1.95rem;
  font-weight: 850;
  color: var(--color-moss);
  line-height: 1;
}

.kyo-detail-price-original {
  font-size: 1.1rem;
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.kyo-detail-saving-badge {
  font-size: 0.8rem;
  font-weight: 750;
  color: #FFFFFF;
  background-color: var(--color-terracotta);
  padding: 0.22rem 0.7rem;
  border-radius: var(--radius-full);
}

.kyo-detail-tax-shipping {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  margin-top: 0.45rem;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  line-height: 1.4;
}

/* CTA Row */
.kyo-pdp-cta-row {
  display: flex;
  gap: 0.85rem;
  align-items: center;
  margin-bottom: 0.85rem;
}

.kyo-pdp-buy-btn {
  flex: 1;
  height: 52px;
  font-size: 1.05rem;
  font-weight: 750;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}

.kyo-pdp-wish-btn {
  width: 52px;
  height: 52px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
}

.kyo-pdp-quick-guarantee {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  padding: 0.35rem 0.5rem;
  flex-wrap: wrap;
  gap: 0.35rem;
}

/* Details Knowledge Zone (Tier 2) */
.kyo-pdp-details-section {
  margin-top: 3rem;
  padding-top: 2.75rem;
  border-top: 1px solid var(--color-border);
}

.kyo-pdp-section-header {
  margin-bottom: 2rem;
}

.kyo-pdp-section-title {
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
  font-weight: 800;
  color: var(--color-moss);
  margin: 0 0 0.35rem 0;
  line-height: 1.3;
}

.kyo-pdp-section-sub {
  font-size: 0.92rem;
  color: var(--color-text-secondary);
  margin: 0;
}

.kyo-pdp-details-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 2.25rem;
  align-items: start;
}

.kyo-pdp-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem 1.65rem;
  box-shadow: var(--shadow-subtle);
}

.kyo-pdp-card--accent {
  background: #FAF8F5;
  border-left: 4px solid var(--color-sage);
}

.kyo-pdp-card--discreet {
  background: #F4F8F5;
  border: 1px solid rgba(46, 64, 54, 0.15);
}

.kyo-pdp-card-header {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 1rem;
}

.kyo-pdp-card-icon {
  font-size: 1.25rem;
  line-height: 1;
}

.kyo-pdp-card-title {
  font-size: 1.05rem;
  font-weight: 750;
  color: var(--color-moss);
  margin: 0;
}

.kyo-pdp-desc-text {
  font-size: 0.96rem;
  line-height: 1.75;
  color: var(--color-text-primary);
  white-space: pre-line;
}

.kyo-pdp-specs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}

.kyo-pdp-specs-table tr {
  border-bottom: 1px solid var(--color-border-light);
}

.kyo-pdp-specs-table tr:last-child {
  border-bottom: none;
}

.kyo-pdp-spec-label {
  padding: 0.55rem 0.5rem 0.55rem 0;
  font-weight: 750;
  color: var(--color-moss);
  width: 40%;
  vertical-align: top;
}

.kyo-pdp-spec-val {
  padding: 0.55rem 0;
  color: var(--color-text-secondary);
  line-height: 1.45;
  vertical-align: top;
}

.kyo-pdp-usage-text {
  font-size: 0.92rem;
  color: var(--color-text-primary);
  line-height: 1.6;
}

.kyo-pdp-discreet-text {
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 960px) {
  .kyo-pdp-hero {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .kyo-pdp-details-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  .kyo-pdp-benefits-grid {
    grid-template-columns: 1fr;
  }
}

/* ----------------- CART (SLIDE-OVER DRAWER & FULL PAGE) ----------------- */
.kyo-drawer-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(24, 35, 30, 0.6);
  backdrop-filter: blur(4px);
  z-index: 99990;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all var(--transition-smooth);
}

.kyo-drawer-overlay.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.kyo-drawer-cart {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  height: 100dvh;
  max-height: 100dvh;
  width: 100%;
  max-width: 480px;
  background-color: var(--color-sand-warm);
  z-index: 99995;
  transform: translateX(100%);
  pointer-events: none;
  transition: transform var(--transition-smooth);
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-modal);
}

.kyo-drawer-overlay.open .kyo-drawer-cart {
  transform: translateX(0);
  pointer-events: auto;
}

body.cart-drawer-open .kyo-pdp-sticky-bar,
body:has(.kyo-drawer-overlay.open) .kyo-pdp-sticky-bar,
body.cart-drawer-open .kyo-mobile-bottom-nav,
body:has(.kyo-drawer-overlay.open) .kyo-mobile-bottom-nav {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.cart-drawer-open .kyo-header,
body:has(.kyo-drawer-overlay.open) .kyo-header {
  pointer-events: none !important;
}

body.cart-drawer-open .kyo-cookie-pill,
body:has(.kyo-drawer-overlay.open) .kyo-cookie-pill {
  display: none !important;
}

.kyo-drawer-header {
  padding: 1.25rem 1.5rem;
  background-color: #FFFFFF;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.kyo-drawer-close-btn {
  background-color: var(--color-sand);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.4rem 0.9rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-moss);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: all var(--transition-fast);
}

.kyo-drawer-close-btn:hover {
  background-color: var(--color-terracotta-soft);
  color: var(--color-terracotta);
}

/* Shipping threshold bar */
.kyo-shipping-bar-box {
  background-color: #FFFFFF;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.kyo-shipping-bar-text {
  font-size: 0.82rem;
  color: var(--color-moss);
  font-weight: 600;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
}

.kyo-shipping-progress {
  height: 6px;
  background-color: var(--color-sand-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.kyo-shipping-progress-fill {
  height: 100%;
  background-color: var(--color-sage);
  width: 0%;
  transition: width var(--transition-smooth);
}

.kyo-drawer-body {
  padding: 1.25rem 1.5rem;
  overflow-y: auto;
  flex-grow: 1;
}

/* REQUIRED: 2-Row Bento Card in Drawer on BOTH Mobile and Desktop! */
.kyo-cart-item-bento {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  margin-bottom: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: var(--shadow-subtle);
}

.kyo-cart-row-top {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.kyo-cart-item-img {
  width: 72px;
  height: 72px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  background-color: var(--color-sand);
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
  flex-shrink: 0;
}

.kyo-cart-item-header-info {
  flex-grow: 1;
  min-width: 0;
}

.kyo-cart-item-sku-line {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-sage);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kyo-cart-item-title-line {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-moss);
  line-height: 1.3;
  margin-top: 0.2rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kyo-cart-row-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.6rem;
  border-top: 1px solid var(--color-border-light);
}

.kyo-qty-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background-color: var(--color-sand-warm);
  overflow: hidden;
}

.kyo-qty-btn {
  background: none;
  border: none;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 700;
  color: var(--color-moss);
}

.kyo-qty-val {
  min-width: 24px;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
}

.kyo-cart-item-price-val {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-moss);
}

.kyo-cart-item-delete {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 0.3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color var(--transition-fast);
}

.kyo-cart-item-delete:hover {
  color: var(--color-danger);
}

.kyo-drawer-footer {
  padding: 1.25rem 1.5rem;
  background-color: #FFFFFF;
  border-top: 1px solid var(--color-border);
}

/* Sleek Collapsible Promo Code in Drawer */
.kyo-drawer-promo-collapse {
  margin-bottom: 0.65rem;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-sand-warm);
  overflow: hidden;
  transition: all var(--transition-fast);
}

.kyo-drawer-promo-collapse[open] {
  background: #FFFFFF;
  border-style: solid;
  border-color: var(--color-border);
}

.kyo-drawer-promo-summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.4rem 0.65rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--color-moss);
  cursor: pointer;
  user-select: none;
}

.kyo-drawer-promo-summary::-webkit-details-marker {
  display: none;
}

.kyo-drawer-promo-summary:hover {
  color: var(--color-terracotta);
}

.kyo-drawer-promo-arrow {
  font-size: 0.7rem;
  transition: transform var(--transition-fast);
  color: var(--color-text-muted);
}

.kyo-drawer-promo-collapse[open] .kyo-drawer-promo-arrow {
  transform: rotate(180deg);
}

.kyo-drawer-promo-collapse .kyo-promo-input-row {
  padding: 0 0.5rem 0.5rem;
  margin-bottom: 0;
  gap: 0.35rem;
}

.kyo-drawer-tax-note {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-bottom: 0.65rem;
  text-align: right;
}

.kyo-drawer-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.kyo-promo-input-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.kyo-promo-input {
  flex-grow: 1;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}

.kyo-summary-line {
  display: flex;
  justify-content: space-between;
  font-size: 0.9rem;
  margin-bottom: 0.4rem;
  color: var(--color-text-secondary);
}

.kyo-summary-line.total {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-moss);
  border-top: 1px solid var(--color-border);
  padding-top: 0.6rem;
  margin-top: 0.6rem;
  margin-bottom: 1.2rem;
}

/* ----------------- CHECKOUT (KASSE-DISKRET) ----------------- */
.kyo-checkout-form {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  box-shadow: var(--shadow-card);
}

.kyo-form-group {
  margin-bottom: 1.25rem;
}

.kyo-form-group label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-moss);
  margin-bottom: 0.4rem;
}

.kyo-form-control {
  width: 100%;
  padding: 0.8rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-sand-warm);
  font-size: 0.95rem;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.kyo-form-control:focus {
  outline: none;
  border-color: var(--color-sage);
  background-color: #FFFFFF;
}

.kyo-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 600px) {
  .kyo-form-row {
    grid-template-columns: 1fr;
  }
}

.kyo-cod-notice-badge {
  background-color: var(--color-sand);
  border: 1px solid var(--color-sage);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  margin: 1.5rem 0;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.kyo-checkout-submit-btn {
  white-space: normal !important;
  line-height: 1.25 !important;
  min-height: 52px;
  height: auto !important;
  padding: 0.85rem 1.25rem !important;
  text-align: center;
}

.kyo-checkout-summary-row {
  transition: background-color var(--transition-fast);
}

.kyo-checkout-summary-thumb {
  width: 52px;
  height: 52px;
  min-width: 52px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--color-border-light);
  background: #FAF8F5;
  display: block;
}

/* ----------------- ORDER CONFIRMATION PAGE (bestellung-bestaetigt.html) ----------------- */
/* Generous padding specification */
.kyo-receipt-card {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2.5rem 2.75rem;
  box-shadow: var(--shadow-card);
  margin: 2.5rem auto 4rem;
  max-width: 860px;
}

@media (max-width: 640px) {
  .kyo-receipt-card {
    padding: 1.25rem 1rem;
    border-radius: var(--radius-lg);
  }
}

/* Refined Order Receipt Items & Tracking Products */
.kyo-receipt-item-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1rem;
  background: var(--color-sand-warm);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-lg);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.kyo-receipt-item-thumb {
  width: 68px;
  height: 68px;
  min-width: 68px;
  object-fit: cover !important;
  border-radius: 12px;
  border: 1px solid var(--color-border-light);
  background: #FAF8F5;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
  display: block;
}

.kyo-receipt-item-price {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--color-moss);
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  text-align: right;
  margin-left: auto;
}

.kyo-tracking-result-box {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-top: 1.75rem;
  box-shadow: var(--shadow-card);
  box-sizing: border-box;
  width: 100%;
}

.kyo-tracking-item-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.75rem 0.9rem;
  background: var(--color-sand-warm);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  margin-bottom: 0.65rem;
  box-sizing: border-box;
  width: 100%;
}

.kyo-tracking-item-thumb {
  width: 52px;
  height: 52px;
  min-width: 52px;
  object-fit: cover !important;
  border-radius: 8px;
  border: 1px solid var(--color-border-light);
  background: #FAF8F5;
  display: block;
  flex-shrink: 0;
}

.kyo-tracking-item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.kyo-tracking-item-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-moss);
  line-height: 1.3;
  word-break: break-word;
}

.kyo-tracking-item-meta {
  font-size: 0.76rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.kyo-tracking-item-price {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--color-moss);
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  margin-left: auto;
  text-align: right;
}

.kyo-tracking-info-box {
  background: var(--color-sand);
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  font-size: 0.86rem;
  line-height: 1.45;
  box-sizing: border-box;
  width: 100%;
}

.kyo-tracking-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  width: 100%;
}

@media (max-width: 640px) {
  .kyo-receipt-item-row {
    padding: 0.65rem 0.75rem;
    gap: 0.65rem;
  }
  .kyo-receipt-item-thumb {
    width: 56px;
    height: 56px;
    min-width: 56px;
  }
  .kyo-receipt-item-price {
    font-size: 0.95rem;
  }
}

/* Totals Box in Confirmation Receipt */
.kyo-receipt-totals-box {
  background: var(--color-sand);
  border-radius: var(--radius-md);
  padding: 1.15rem 1.25rem;
  margin: 1.5rem 0 1.75rem;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.kyo-receipt-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  font-size: 0.90rem;
  color: var(--color-moss);
}

.kyo-receipt-totals-row--discount {
  color: var(--color-terracotta);
}

.kyo-receipt-totals-row--grand {
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--color-border);
  font-size: clamp(1.02rem, 3.2vw, 1.22rem);
  font-weight: 800;
  color: var(--color-moss);
  line-height: 1.25;
}

.kyo-receipt-totals-val {
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  text-align: right;
  margin-left: auto;
}

.kyo-receipt-totals-row--grand .kyo-receipt-totals-val {
  font-weight: 800;
  font-size: clamp(1.08rem, 3.5vw, 1.25rem);
}

.kyo-receipt-totals-tax {
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: 0.4rem;
  line-height: 1.35;
}

/* Responsive Receipt Action Grid */
.kyo-receipt-action-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
  width: 100%;
}

.kyo-receipt-btn-track {
  min-height: 48px !important;
  font-size: 0.95rem !important;
  font-weight: 750 !important;
  box-shadow: 0 4px 14px rgba(200, 90, 50, 0.25) !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

.kyo-receipt-btn-print {
  min-height: 44px !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
}

.kyo-receipt-support-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  width: 100%;
  margin-top: 0.5rem;
}

.kyo-receipt-support-btn {
  width: 100% !important;
  padding: 0.6rem 0.5rem !important;
  font-size: 0.80rem !important;
  justify-content: center !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  overflow: hidden !important;
}

@media (min-width: 641px) {
  .kyo-receipt-action-grid {
    flex-direction: row;
    align-items: center;
  }
  .kyo-receipt-btn-track {
    flex: 2;
    width: auto !important;
  }
  .kyo-receipt-btn-print {
    flex: 1;
    width: auto !important;
  }
}

/* Pulsing Status Hero */
.kyo-receipt-hero {
  text-align: center;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 2rem;
}

.kyo-pulse-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background-color: var(--color-success-bg);
  color: var(--color-success);
  border: 1px solid rgba(46, 125, 50, 0.3);
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 1rem;
}

.kyo-pulse-dot {
  width: 10px;
  height: 10px;
  background-color: var(--color-success);
  border-radius: 50%;
  position: relative;
}

.kyo-pulse-dot::after {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid var(--color-success);
  animation: kyoPulseRing 1.6s infinite ease-out;
}

@keyframes kyoPulseRing {
  0% { transform: scale(0.8); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

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

@media (max-width: 700px) {
  .kyo-stepper-wrap {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

.kyo-step-item {
  text-align: center;
  position: relative;
}

.kyo-step-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--color-sand);
  border: 2px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
  position: relative;
  z-index: 2;
}

.kyo-step-item.done .kyo-step-circle {
  background-color: var(--color-sage);
  border-color: var(--color-sage);
  color: #FFFFFF;
}

.kyo-step-item.active .kyo-step-circle {
  background-color: var(--color-terracotta);
  border-color: var(--color-terracotta);
  color: #FFFFFF;
  box-shadow: 0 0 0 4px var(--color-terracotta-soft);
}

.kyo-step-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--color-moss);
}

.kyo-step-desc {
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

/* SUPPORT BUTTONS LAYOUT SPECIFICATION */
/* Desktop: Side-by-side with width: auto */
.kyo-receipt-support-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-light);
}

.kyo-receipt-support-actions .kyo-btn {
  width: auto;
  flex: 0 0 auto;
}

/* Mobile: Proportional 2-column grid 50% / 50% */
@media (max-width: 640px) {
  .kyo-receipt-support-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .kyo-receipt-support-actions .kyo-btn {
    width: 100%;
    font-size: 0.85rem;
    padding: 0.75rem 0.5rem;
  }
}

/* ----------------- KUNDENSERVICE TOPIC BUTTONS ----------------- */
/* Topic selection grid */
.kyo-topic-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.kyo-topic-btn {
  flex: 1 1 auto;
  min-height: 44px;
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.25rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-moss);
  cursor: pointer;
  text-align: center;
  transition: all var(--transition-fast);
}

.kyo-topic-btn:hover {
  border-color: var(--color-sage);
  background-color: var(--color-sand);
}

.kyo-topic-btn.selected {
  border-color: var(--color-terracotta);
  background-color: var(--color-terracotta-soft);
  color: var(--color-terracotta);
}

/* Mobile topic selector: 2-column grid + 5th button full width */
@media (max-width: 640px) {
  .kyo-topic-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .kyo-topic-btn {
    min-height: 44px;
    width: 100%;
  }
  .kyo-topic-btn:nth-child(5) {
    grid-column: 1 / -1;
  }
}

/* ----------------- PAKET STATUS TRACKING ----------------- */
.kyo-tracking-card {
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 2.5rem;
  box-shadow: var(--shadow-card);
  max-width: 680px;
  margin: 3rem auto;
}

/* Strict Red Error Card - No fake data! */
.kyo-track-error-card {
  background-color: var(--color-danger-bg);
  border: 2px solid var(--color-danger);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  margin-top: 1.5rem;
  display: none;
}

.kyo-track-error-card.visible {
  display: block;
  animation: fadeIn 0.3s ease;
}

.kyo-track-error-title {
  color: var(--color-danger);
  font-weight: 700;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

/* ----------------- DSGVO & TTDSG COOKIE & PRIVACY MODAL ----------------- */
.kyo-cookie-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 15, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 100000 !important;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}

.kyo-cookie-backdrop.visible {
  opacity: 1;
  pointer-events: auto;
}

.kyo-cookie-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -46%) scale(0.96);
  width: min(680px, calc(100vw - 2rem));
  max-height: min(84vh, 680px);
  background-color: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 1.35rem 1.65rem 1.15rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
  z-index: 100001 !important;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.kyo-cookie-modal.visible {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.kyo-cookie-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
  flex-shrink: 0;
}

.kyo-cookie-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-sage);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kyo-cookie-badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.6);
}

.kyo-cookie-close-btn {
  background: none;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.kyo-cookie-close-btn:hover {
  color: var(--color-moss);
  background: var(--color-sand);
}

.kyo-cookie-modal-title {
  font-size: clamp(1.15rem, 1.2vw + 0.8rem, 1.35rem);
  font-weight: 800;
  color: var(--color-moss);
  margin: 0 0 0.5rem 0;
  line-height: 1.25;
}

.kyo-cookie-modal-desc {
  font-size: 0.84rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0 0 1.25rem 0;
}

.kyo-cookie-categories {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

.kyo-cookie-cat-card {
  background: var(--color-sand-warm);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 0.9rem 1.1rem;
  transition: all var(--transition-fast);
}

.kyo-cookie-cat-card:hover {
  border-color: var(--color-sage);
}

.kyo-cookie-cat-card--disabled {
  opacity: 0.78;
  background: #F8FAFC;
}

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

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

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

.kyo-cookie-cat-icon {
  font-size: 1rem;
  line-height: 1;
}

.kyo-cookie-cat-title-row strong {
  font-size: 0.92rem;
  color: var(--color-moss);
}

.kyo-cookie-tag {
  font-size: 0.68rem;
  font-weight: 750;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.kyo-cookie-tag--required {
  background: #E2E8F0;
  color: #475569;
}

.kyo-cookie-tag--opt {
  background: rgba(210, 84, 39, 0.12);
  color: var(--color-terracotta);
}

.kyo-cookie-tag--blocked {
  background: #ECFDF5;
  color: #047857;
}

.kyo-cookie-cat-summary {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  line-height: 1.45;
  margin: 0;
}

.kyo-cookie-details-box {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.kyo-cookie-file-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
  font-size: 0.76rem;
  color: var(--color-text-secondary);
}

.kyo-cookie-file-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.72rem;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  color: var(--color-moss);
  font-weight: 700;
}

.kyo-cookie-file-meta {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  font-weight: 600;
}

.kyo-cookie-blocked-pill {
  font-size: 0.72rem;
  font-weight: 800;
  color: #047857;
  background: #D1FAE5;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
}

/* Switch Toggle Component */
.kyo-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}

.kyo-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.kyo-switch-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background-color: #CBD5E1;
  transition: all 0.25s ease;
  border-radius: 24px;
}

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

.kyo-switch input:checked + .kyo-switch-slider {
  background-color: var(--color-terracotta);
}

.kyo-switch input:checked + .kyo-switch-slider:before {
  transform: translateX(20px);
}

.kyo-switch input:focus + .kyo-switch-slider {
  box-shadow: 0 0 0 2px rgba(210, 84, 39, 0.25);
}

/* Footer / Actions Bar */
.kyo-cookie-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  margin-top: auto;
}

.kyo-cookie-links-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

.kyo-cookie-legal-link {
  color: var(--color-text-secondary);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.kyo-cookie-legal-link:hover {
  color: var(--color-terracotta);
}

.kyo-cookie-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0.25rem 0.75rem 0;
  min-height: 0;
}

.kyo-cookie-modal-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.kyo-cookie-btn-subgroup {
  display: contents;
}

/* ----------------- TOPBAR RESPONSIVENESS ----------------- */
.kyo-topbar-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.kyo-topbar-desktop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.kyo-topbar-mobile {
  display: none;
}

/* ----------------- PRE-FOOTER VOUCHER & BRAND TRUST BANNER ----------------- */
.kyo-prefooter-banner {
  background: #F8FAF8;
  padding: 3rem 0;
  border-top: 1px solid var(--color-border-light);
  position: relative;
  z-index: 10;
}

.kyo-prefooter-card {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 2.5rem;
  background: #FFFFFF;
  border: 1px solid #DCE6DF;
  border-radius: var(--radius-xl);
  padding: 2.25rem 2.5rem;
  box-shadow: 0 10px 30px rgba(27, 42, 33, 0.05);
}

.kyo-prefooter-content {
  flex: 1 1 58%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kyo-prefooter-badge-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 0.75rem;
}

.kyo-prefooter-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(199, 93, 56, 0.1);
  color: var(--color-terracotta);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-full);
  border: 1px solid rgba(199, 93, 56, 0.25);
}

.kyo-prefooter-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-terracotta);
  animation: pulseDot 2s infinite;
}

.kyo-prefooter-subbadge {
  font-size: 0.78rem;
  color: var(--color-sage);
  font-weight: 600;
}

.kyo-prefooter-heading {
  font-size: clamp(1.35rem, 1.8vw + 0.5rem, 1.75rem);
  color: var(--color-moss);
  font-family: var(--font-display);
  line-height: 1.25;
  margin-bottom: 0.65rem;
}

.kyo-prefooter-desc {
  font-size: 0.92rem;
  color: #4B6354;
  line-height: 1.55;
  margin-bottom: 1.25rem;
  max-width: 640px;
}

.kyo-prefooter-benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem 1.25rem;
}

.kyo-prefooter-benefit-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-moss);
}

.kyo-prefooter-benefit-item svg {
  flex-shrink: 0;
  color: var(--color-terracotta);
}

.kyo-prefooter-action {
  flex: 0 0 350px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.kyo-voucher-box {
  background: linear-gradient(135deg, rgba(199, 93, 56, 0.05), rgba(46, 85, 62, 0.05));
  border: 2px dashed rgba(199, 93, 56, 0.45);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  text-align: center;
}

.kyo-voucher-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kyo-voucher-tag {
  font-size: 0.68rem;
  font-family: var(--font-mono);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--color-moss);
}

.kyo-voucher-discount {
  font-size: 0.75rem;
  font-weight: 800;
  color: #FFFFFF;
  background: var(--color-terracotta);
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-full);
}

.kyo-voucher-code-container {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  background: #FFFFFF;
  border: 1.5px solid rgba(199, 93, 56, 0.4);
  border-radius: var(--radius-md);
  padding: 0.35rem 0.35rem 0.35rem 0.75rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.kyo-voucher-code-wrap {
  display: flex;
  align-items: center;
  flex: 1;
}

.kyo-voucher-code {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  color: var(--color-moss);
  background: none;
  border: none;
  padding: 0;
}

.kyo-voucher-copy-btn {
  background: var(--color-terracotta);
  color: #FFFFFF;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.kyo-voucher-copy-btn:hover {
  background: #b84c24;
  transform: translateY(-1px);
}

.kyo-voucher-note {
  font-size: 0.72rem;
  color: var(--color-sage);
  font-weight: 600;
  line-height: 1.35;
}

.kyo-voucher-cta-btn {
  font-size: 0.85rem;
  padding: 0.65rem 1rem;
}

/* ----------------- FOOTER ----------------- */

/* ==========================================================================
   COMPACT & INFORMATIVE LUXURY FOOTER (SPACE-EFFICIENT & ZERO OVERLAP)
   ========================================================================== */
.kyo-footer {
  background: linear-gradient(180deg, #0A1410 0%, #070F0C 100%);
  color: #EDE8DE;
  padding: 2.25rem 0 1.25rem;
  margin-top: auto;
  border-top: 1px solid rgba(0, 245, 160, 0.25);
  position: relative;
  z-index: 20;
}

/* 1. Trust Pillars & Standards Header Bar (Compact Ticker) */
.kyo-footer-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  padding-bottom: 1.25rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

@media (max-width: 1024px) {
  .kyo-footer-pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .kyo-footer-pillars {
    grid-template-columns: 1fr;
    gap: 0.65rem;
    padding-bottom: 1rem;
    margin-bottom: 1.25rem;
  }
}

.kyo-footer-pillar-card {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  transition: all var(--transition-fast);
}

.kyo-footer-pillar-card:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(0, 245, 160, 0.3);
  transform: translateY(-1px);
}

.kyo-footer-pillar-icon {
  font-size: 1.3rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.kyo-footer-pillar-text strong {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  color: #FFFFFF;
  margin-bottom: 0.15rem;
  letter-spacing: 0.01em;
  line-height: 1.2;
}

.kyo-footer-pillar-text p {
  font-size: 0.72rem;
  line-height: 1.35;
  color: #B2C3BB;
  margin: 0;
}

/* 2. Main 5-Column Grid (Compact & Dense) */
.kyo-footer-grid {
  display: grid;
  grid-template-columns: 1.45fr 1.35fr 1.05fr 1.05fr 1.15fr;
  gap: clamp(1rem, 1.8vw, 1.75rem);
  margin-bottom: 1.5rem;
}

@media (max-width: 1200px) {
  .kyo-footer-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 860px) {
  .kyo-footer-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 600px) {
  .kyo-footer-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.kyo-footer-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.kyo-footer-col h4 {
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.65rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

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

.kyo-footer-link {
  color: #D3DED9;
  font-size: 0.78rem;
  line-height: 1.35;
  text-decoration: none;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.kyo-footer-link:hover {
  color: #A7E4CD;
  padding-left: 3px;
}

.kyo-footer-link-badge {
  font-size: 0.62rem;
  font-weight: 700;
  padding: 0.08rem 0.32rem;
  border-radius: var(--radius-full);
  background: rgba(210, 84, 39, 0.25);
  color: #FF8F6B;
  border: 1px solid rgba(210, 84, 39, 0.4);
  line-height: 1.1;
}

/* Trust Tags and Certifications */
.kyo-footer-badges-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.65rem;
}

.kyo-footer-cert-pill {
  font-size: 0.68rem;
  font-weight: 650;
  padding: 0.16rem 0.5rem;
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #A7E4CD;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  letter-spacing: 0.01em;
}

/* Contact and Business Card inside Footer */
.kyo-footer-contact-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-sm);
  padding: 0.75rem 0.95rem;
  font-size: 0.78rem;
  line-height: 1.45;
  color: #D6E4DC;
}

.kyo-footer-contact-card a {
  color: #A7E4CD;
  text-decoration: none;
  font-weight: 600;
  transition: color var(--transition-fast);
}

.kyo-footer-contact-card a:hover {
  color: #FFFFFF;
  text-decoration: underline;
}

.kyo-footer-hotline-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0, 245, 160, 0.12);
  border: 1px solid rgba(0, 245, 160, 0.4);
  padding: 0.28rem 0.65rem;
  border-radius: var(--radius-full);
  color: #A7F3D0;
  font-weight: 700;
  font-size: 0.75rem;
  margin-top: 0.55rem;
  line-height: 1.3;
}

.kyo-footer-hotline-badge span {
  color: #00F5A0;
}

.kyo-footer-tracking-btn {
  background: linear-gradient(135deg, #2D4A3E 0%, #1B352B 100%) !important;
  color: #FFFFFF !important;
  border: 1px solid #4A6B62 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  transition: all var(--transition-fast);
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
  height: 42px !important;
  padding: 0 1.25rem !important;
  line-height: 1 !important;
  text-align: center !important;
  box-sizing: border-box !important;
  border-radius: var(--radius-full) !important;
}

.kyo-footer-tracking-btn:hover {
  background: linear-gradient(135deg, #3A5F50 0%, #244437 100%) !important;
  border-color: #618A7D !important;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

/* 3. Payment, Shipping & Security Methods Bar (Compact) */
.kyo-footer-methods-bar {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: var(--radius-md);
  padding: 0.85rem 1.15rem;
  margin-bottom: 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.15rem;
  align-items: center;
}

@media (max-width: 900px) {
  .kyo-footer-methods-bar {
    grid-template-columns: 1fr;
    gap: 0.85rem;
  }
}

.kyo-method-group {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.kyo-method-group-title {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #A9BDB4;
}

.kyo-method-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.kyo-method-chip {
  font-size: 0.7rem;
  font-weight: 600;
  color: #E2ECE6;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 0.16rem 0.45rem;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

/* 4. Bottom Legal & HWG Compliance Disclaimer (Compact) */
.kyo-footer-bottom {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 0.72rem;
  color: #A3B4AC;
  line-height: 1.45;
}

.kyo-footer-bottom-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.75rem;
}

.kyo-footer-hwg-box {
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-left: 2px solid var(--color-sage);
  border-radius: 4px;
  padding: 0.55rem 0.85rem;
  font-size: 0.7rem;
  line-height: 1.45;
  color: #9EB1A8;
}


/* ----------------- BUNDLE & EDITORIAL MEDIA PRESENTATION ----------------- */
.kyo-bundle-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-height: clamp(260px, 32vw, 360px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 0.85rem;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  background: #F4EFEB;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
}

.kyo-bundle-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform var(--transition-smooth);
}

.kyo-bento-card:hover .kyo-bundle-thumb img {
  transform: scale(1.02);
}

/* Compact System Package Card Specifics */
.kyo-bento-card--package {
  padding: clamp(0.95rem, 1.2vw + 0.4rem, 1.35rem) !important;
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
}

.kyo-package-includes {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.85rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.kyo-package-includes-title {
  font-weight: 700;
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
  color: var(--color-moss);
}

.kyo-package-includes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: clamp(0.72rem, 0.12vw + 0.64rem, 0.78rem);
  color: var(--color-text-secondary);
  line-height: 1.35;
}

.kyo-hero-card-preview {
  position: relative;
  background: var(--color-sand);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: all var(--transition-smooth);
}

.kyo-hero-card-preview:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(74, 107, 98, 0.35);
}

.kyo-hero-card-media {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  background: #EAE5D9;
}

.kyo-hero-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-smooth);
}

.kyo-hero-card-preview:hover .kyo-hero-card-media img {
  transform: scale(1.04);
}

.kyo-hero-card-footer {
  background: #FFFFFF;
  padding: 1rem 1.25rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-border);
}

.kyo-expert-portrait-frame {
  width: 100%;
  max-width: clamp(220px, 26vw, 320px);
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 3px solid #FFFFFF;
  margin: 0 auto;
  background: var(--color-sand);
}

.kyo-expert-portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.kyo-editorial-frame {
  width: 100%;
  aspect-ratio: 16 / 10;
  max-height: clamp(200px, 24vw, 280px);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  border: 1px solid var(--color-border);
  background: var(--color-sand);
  margin-bottom: 1.25rem;
}

.kyo-editorial-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
  transition: transform var(--transition-smooth);
}

.kyo-bento-card:hover .kyo-editorial-frame img {
  transform: scale(1.02);
}

.kyo-journal-card {
  padding: clamp(1.25rem, 1.6vw + 0.5rem, 1.85rem) !important;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-radius: var(--radius-xl);
}

.kyo-journal-card h2 {
  font-size: clamp(1.1rem, 1vw + 0.55rem, 1.35rem);
  line-height: 1.3;
}

.kyo-journal-card h3 {
  font-size: clamp(1.05rem, 0.9vw + 0.55rem, 1.25rem);
  line-height: 1.3;
}

/* ----------------- MODERN GERMAN LUXURY UI/UX ENHANCEMENTS ----------------- */

/* 1. KEYFRAME ANIMATIONS */
@keyframes kyoPulseRing {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(200, 90, 50, 0.7);
  }
  70% {
    transform: scale(1.05);
    box-shadow: 0 0 0 14px rgba(200, 90, 50, 0);
  }
  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(200, 90, 50, 0);
  }
}

@keyframes kyoFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-5px);
  }
}

@keyframes kyoMarquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* 2. INTERACTIVE HERO HOTSPOTS */
.kyo-hotspot-container {
  position: relative;
  width: 100%;
  overflow: visible;
}

.kyo-hotspot-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.kyo-hotspot {
  position: absolute;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  margin-left: -18px;
  border-radius: 50%;
  background: linear-gradient(135deg, #D25427 0%, #FF6B35 100%);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: auto;
  z-index: 45;
  border: 2.5px solid #FFFFFF;
  box-shadow: 0 0 14px rgba(255, 107, 53, 0.55), 0 4px 14px rgba(0, 0, 0, 0.35);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0;
  box-sizing: border-box;
}

.kyo-hotspot::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 107, 53, 0.5);
  animation: kyoRadarWave 2s infinite ease-out;
  pointer-events: none;
}

@keyframes kyoRadarWave {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(1.6); opacity: 0; }
}

.kyo-hotspot:hover {
  transform: scale(1.18);
  box-shadow: 0 0 20px #FF6B35, 0 0 35px rgba(255, 107, 53, 0.6);
}

.kyo-hotspot.is-active {
  background: #07120D;
  border-color: #00F5A0;
  transform: scale(1.22);
  z-index: 46;
  box-shadow: 0 0 0 4px rgba(0, 245, 160, 0.3), 0 0 20px #00F5A0, 0 0 35px rgba(0, 245, 160, 0.5);
}

.kyo-hotspot.is-active::before {
  border-color: rgba(0, 245, 160, 0.7);
  animation: kyoRadarWaveActive 1.6s infinite ease-out;
}

@keyframes kyoRadarWaveActive {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

.kyo-hotspot-icon {
  width: 14px;
  height: 14px;
  display: block;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
  transform-origin: 7px 7px;
  pointer-events: none;
}

.kyo-hotspot.is-active .kyo-hotspot-icon {
  transform: rotate(45deg);
  color: #00F5A0;
}

/* Fallback if span with text is rendered */
span.kyo-hotspot-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  font-size: 20px;
  font-weight: 800;
  transform: translateY(-1px);
}

/* Zone Switcher Toolbar */
.kyo-hero-zone-bar {
  display: flex;
  gap: 0.45rem;
  padding: 0.75rem 1rem 0.6rem;
  background: var(--color-sand-warm);
  border-bottom: 1px solid var(--color-border);
  overflow-x: auto;
}

.kyo-hero-zone-btn {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  padding: 0.38rem 0.8rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-moss);
  cursor: pointer;
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.kyo-hero-zone-btn:hover {
  border-color: var(--color-sage);
  color: var(--color-moss);
}

.kyo-hero-zone-btn.is-active {
  background: #07120D;
  color: #FFFFFF;
  border-color: #00F5A0;
  box-shadow: 0 0 12px rgba(0, 245, 160, 0.35);
}

/* Biomechanic Telemetry Chips */
.kyo-spec-chip {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(0, 245, 160, 0.12);
  color: #00F5A0;
  padding: 0.25rem 0.6rem;
  border-radius: 4px;
  border: 1px solid rgba(0, 245, 160, 0.35);
  text-shadow: 0 0 8px rgba(0, 245, 160, 0.4);
}

/* Miniature Floating Glass HUD Window strictly on the Product Photo */
.kyo-hero-inspector {
  position: absolute !important;
  bottom: 8px !important;
  left: 8px !important;
  right: 8px !important;
  background: rgba(10, 20, 15, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(0, 245, 160, 0.4) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5), 0 0 14px rgba(0, 245, 160, 0.12) !important;
  padding: 0.55rem 0.75rem !important;
  z-index: 25 !important;
  transform: translateY(6px) scale(0.98);
  opacity: 0;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  color: #FFFFFF;
  box-sizing: border-box !important;
}

.kyo-hero-inspector.is-open {
  transform: translateY(0) scale(1) !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.kyo-inspector-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.kyo-inspector-title-wrap {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  overflow: hidden;
}

.kyo-inspector-close-btn {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
  color: #A7E4CD;
  line-height: 1;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.kyo-inspector-close-btn:hover {
  background: rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  transform: scale(1.1);
}

/* Compact Telemetry Chips Row */
.kyo-inspector-telemetry-row {
  display: flex;
  gap: 0.35rem;
  align-items: center;
  margin-bottom: 0.4rem;
  flex-wrap: wrap;
}

.kyo-inspector-chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
  padding: 0.18rem 0.45rem;
  font-size: clamp(0.64rem, 0.15vw + 0.54rem, 0.72rem);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
}

.kyo-inspector-chip-val {
  font-family: var(--font-mono);
  font-weight: 800;
}

.kyo-val-amber {
  color: #FF9F43;
  text-shadow: 0 0 8px rgba(255, 159, 67, 0.6);
}

.kyo-val-cyan {
  color: #00E5FF;
  text-shadow: 0 0 8px rgba(0, 229, 255, 0.6);
}

.kyo-val-mint {
  color: #00F5A0;
  text-shadow: 0 0 8px rgba(0, 245, 160, 0.6);
}

/* Compact Action Line */
.kyo-inspector-action-row {
  display: block;
  padding-top: 0.35rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  width: 100%;
}

.kyo-inspector-desc-short {
  font-size: 0.72rem;
  color: #C8DCD3;
  line-height: 1.35;
  white-space: normal;
  margin: 0;
  display: block;
}

.kyo-btn-neon-cta-sm {
  background: linear-gradient(135deg, #D25427 0%, #FF6B35 100%);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: var(--radius-full);
  font-size: 0.76rem;
  font-weight: 700;
  padding: 0.32rem 0.8rem;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(210, 84, 39, 0.4), 0 0 10px rgba(255, 107, 53, 0.25);
  transition: all var(--transition-fast);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  white-space: nowrap;
  flex-shrink: 0;
}

.kyo-btn-neon-cta-sm:hover {
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(210, 84, 39, 0.6), 0 0 18px rgba(255, 107, 53, 0.4);
}

.kyo-hotspot-tooltip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  background: rgba(20, 30, 25, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #FFFFFF;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-size: 0.82rem;
  line-height: 1.45;
  width: max-content;
  max-width: 260px;
  pointer-events: none;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 25;
  text-align: left;
}

.kyo-hotspot-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgba(20, 30, 25, 0.95);
}

.kyo-hotspot:hover .kyo-hotspot-tooltip,
.kyo-hotspot:focus .kyo-hotspot-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

/* 3. INFINITE LUXURY MARQUEE TICKER */
.kyo-ticker-wrap {
  overflow: hidden;
  background: var(--color-moss-deep);
  color: #E2DBD0;
  padding: 0.85rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
  user-select: none;
}

.kyo-ticker {
  display: inline-block;
  animation: kyoMarquee 38s linear infinite;
}

.kyo-ticker:hover {
  animation-play-state: paused;
}

.kyo-ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0 1.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #D6CEC1;
}

.kyo-ticker-item .gold-glyph {
  color: var(--color-gold);
  font-size: 0.95rem;
}

/* 4. CLINICAL FAQ ACCORDIONS (Native Details/Summary) */
.kyo-faq-accordion {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 1rem;
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-subtle);
}

.kyo-faq-accordion[open] {
  box-shadow: var(--shadow-card);
  border-color: rgba(74, 107, 98, 0.35);
}

.kyo-faq-summary {
  padding: 1.35rem 1.75rem;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--color-moss);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
  user-select: none;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.kyo-faq-summary-wrap,
.kyo-faq-summary > span {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 0.35rem !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.kyo-faq-summary::-webkit-details-marker {
  display: none;
}

.kyo-faq-summary:hover {
  color: var(--color-sage);
  background-color: var(--color-sand-warm);
}

.kyo-faq-chevron {
  width: 22px;
  height: 22px;
  stroke: var(--color-sage);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), stroke 0.2s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

.kyo-faq-accordion[open] .kyo-faq-chevron {
  transform: rotate(180deg);
  stroke: var(--color-terracotta);
}

.kyo-faq-content {
  padding: 0 1.75rem 1.6rem;
  font-size: 0.98rem;
  line-height: 1.75;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border-light);
  padding-top: 1.25rem;
}

.kyo-faq-tag {
  display: inline-block !important;
  font-size: 0.70rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 0.2rem 0.6rem !important;
  border-radius: var(--radius-full) !important;
  background: var(--color-sage-ultra-light) !important;
  color: var(--color-sage) !important;
  margin-right: 0 !important;
  margin-bottom: 0.15rem !important;
}

.kyo-faq-question {
  display: block !important;
  font-weight: 700 !important;
  color: var(--color-moss) !important;
  line-height: 1.35 !important;
}

/* 5. TELEMETRY STUDIO METRIC TILES */
.kyo-telemetry-metrics-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}

.kyo-metric-tile {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-md);
  padding: 1.1rem;
  text-align: center;
  transition: all var(--transition-smooth);
}

.kyo-metric-value {
  font-family: var(--font-mono);
  font-size: 1.85rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.25rem;
}

.kyo-metric-value.good {
  color: #4ADE80;
  text-shadow: 0 0 16px rgba(74, 222, 128, 0.35);
}

.kyo-metric-value.bad {
  color: #F87171;
  text-shadow: 0 0 16px rgba(248, 113, 113, 0.35);
}

.kyo-metric-label {
  font-size: 0.78rem;
  color: #B4C4BC;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* 6. FLOATING QUICK-CART TOAST NOTIFICATION */
.kyo-toast {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: rgba(22, 36, 30, 0.96);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #FFFFFF;
  padding: 0.85rem 1.25rem;
  border-radius: var(--radius-lg);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  z-index: 9999;
  transform: translateY(120%);
  opacity: 0;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  max-width: 460px;
}

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

.kyo-toast-icon {
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kyo-toast-msg {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.35;
  color: #FFFFFF;
  flex: 1;
}

.kyo-toast-btn {
  background: var(--color-terracotta);
  color: #FFFFFF;
  border: none;
  padding: 0.45rem 0.95rem;
  border-radius: var(--radius-full);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color var(--transition-fast);
}

.kyo-toast-btn:hover {
  background: var(--color-terracotta-hover);
}

.kyo-toast-close {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 0.2rem;
  margin-left: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kyo-toast-close:hover {
  color: #FFFFFF;
}

.kyo-toast--error {
  border-color: rgba(239, 68, 68, 0.5) !important;
  box-shadow: 0 16px 40px rgba(127, 29, 29, 0.4) !important;
}

.kyo-toast--warning {
  border-color: rgba(245, 158, 11, 0.5) !important;
  box-shadow: 0 16px 40px rgba(180, 83, 9, 0.4) !important;
}

.kyo-toast--success {
  border-color: rgba(74, 222, 128, 0.4) !important;
}

@media (max-width: 600px) {
  .kyo-toast {
    left: 1rem !important;
    right: 1rem !important;
    bottom: calc(72px + env(safe-area-inset-bottom, 8px)) !important;
    max-width: none !important;
    padding: 0.75rem 0.95rem !important;
    border-radius: var(--radius-md) !important;
  }
}

/* 7. REFINED BUTTON MICRO-INTERACTIONS */
.kyo-btn-primary {
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(200, 90, 50, 0.22);
}

.kyo-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--color-terracotta-glow);
}

.kyo-hero-badge {
  animation: kyoFloat 4s ease-in-out infinite;
}


/* ----------------- ADVANCED INTERACTIVE UI/UX SUITE ----------------- */

/* Ambient Glowing Backdrop Orbs */
.kyo-has-ambient-glow {
  position: relative;
  overflow: hidden;
}

.kyo-has-ambient-glow::before {
  content: '';
  position: absolute;
  top: -150px;
  right: -100px;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 90, 50, 0.08) 0%, rgba(74, 107, 98, 0.04) 50%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.kyo-has-ambient-glow::after {
  content: '';
  position: absolute;
  bottom: -120px;
  left: -80px;
  width: 450px;
  height: 450px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74, 107, 98, 0.08) 0%, rgba(200, 90, 50, 0.03) 50%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

/* 1. BEFORE / AFTER COMPARISON SLIDER (.kyo-comparison-slider) */
.kyo-comparison-card {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin: 3.5rem 0;
}

.kyo-comparison-header {
  padding: 2.25rem 2.25rem 1.5rem;
  text-align: center;
  background: var(--color-sand-warm);
  border-bottom: 1px solid var(--color-border-light);
}

.kyo-comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
}

@media (max-width: 768px) {
  .kyo-comparison-grid {
    grid-template-columns: 1fr;
  }
}

.kyo-comparison-col {
  padding: 2.5rem 2rem;
  display: flex;
  flex-direction: column;
  transition: all var(--transition-smooth);
}

.kyo-comparison-col--before {
  background: #FAF9F7;
  border-right: 1px dashed rgba(36, 51, 44, 0.15);
}

.kyo-comparison-col--after {
  background: linear-gradient(180deg, #F9F7F2 0%, #FFFFFF 100%);
  position: relative;
}

.kyo-comparison-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-full);
  margin-bottom: 1.25rem;
  width: max-content;
}

.kyo-comparison-badge--bad {
  background: #FDEDED;
  color: #C62828;
  border: 1px solid rgba(198, 40, 40, 0.2);
}

.kyo-comparison-badge--good {
  background: #E8F5E9;
  color: #2E7D32;
  border: 1px solid rgba(46, 125, 50, 0.25);
}

.kyo-comparison-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.kyo-comparison-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.kyo-comparison-icon--bad {
  color: #D32F2F;
  font-size: 1.1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.kyo-comparison-icon--good {
  color: #2E7D32;
  font-size: 1.1rem;
  font-weight: bold;
  flex-shrink: 0;
  margin-top: 1px;
}

/* 2. SCHLAFRUHE & BLASEN-KALKULATOR (.kyo-sleep-calculator) */
.kyo-calculator-widget {
  background: linear-gradient(135deg, #1C2B24 0%, #121E19 100%);
  color: #FFFFFF;
  border-radius: var(--radius-xl);
  padding: 2.75rem;
  box-shadow: var(--shadow-card);
  margin: 3.5rem 0;
  position: relative;
  overflow: hidden;
}

.kyo-calculator-widget::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 90, 50, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

.kyo-calc-layout {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 2.5rem;
  align-items: center;
  position: relative;
  z-index: 2;
}

@media (max-width: 900px) {
  .kyo-calc-layout {
    grid-template-columns: 1fr;
  }
}

.kyo-calc-step-title {
  font-size: clamp(0.76rem, 0.2vw + 0.62rem, 0.86rem);
  font-weight: 700;
  color: #A7E4CD;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.kyo-calc-options-row {
  display: flex;
  gap: clamp(0.35rem, 0.4vw, 0.55rem);
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}

.kyo-calc-btn {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #D6E4DC;
  font-size: clamp(0.76rem, 0.35vw + 0.52rem, 0.88rem);
  font-weight: 600;
  padding: 0.45rem clamp(0.6rem, 0.6vw, 0.95rem);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
}

.kyo-calc-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
}

.kyo-calc-btn.selected {
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
  color: #FFFFFF;
  box-shadow: 0 4px 14px var(--color-terracotta-glow);
}

.kyo-calc-result-box {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
  text-align: center;
}

.kyo-calc-gain-metric {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: #4ADE80;
  line-height: 1.1;
  margin: 0.5rem 0 0.25rem;
  text-shadow: 0 0 20px rgba(74, 222, 128, 0.35);
}

.kyo-calc-schedule-list {
  text-align: left;
  margin: 0.75rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.kyo-calc-schedule-list li {
  display: grid;
  grid-template-columns: 88px 1fr;
  align-items: center;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.09);
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
}

.kyo-calc-schedule-list li:hover {
  background: rgba(255, 255, 255, 0.08);
}

.kyo-calc-schedule-time {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.82rem;
  color: #A7E4CD;
  white-space: nowrap;
}

.kyo-chrono-text {
  font-size: 0.82rem;
  line-height: 1.4;
  color: #E2ECE6;
}

.kyo-chrono-pill {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 0.12rem 0.45rem;
  border-radius: var(--radius-full);
  margin-left: 0.35rem;
  display: inline-block;
  vertical-align: middle;
  line-height: 1.2;
}

.kyo-chrono-pill--warn {
  background: rgba(245, 158, 11, 0.25);
  color: #FDE68A;
  border: 1px solid rgba(245, 158, 11, 0.5);
}

.kyo-chrono-pill--good {
  background: rgba(74, 222, 128, 0.2);
  color: #A7F3D0;
  border: 1px solid rgba(74, 222, 128, 0.4);
}

.kyo-calc-btn:focus,
.kyo-calc-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.kyo-calc-btn.selected:focus,
.kyo-calc-btn.selected:focus-visible {
  outline: none;
  box-shadow: 0 4px 14px var(--color-terracotta-glow);
}

/* Multi-Solution Spectrum inside Calculator */
.kyo-calc-telemetry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.45rem;
  margin: 0.85rem 0 1rem;
}

.kyo-calc-telemetry-chip {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius-sm);
  padding: 0.45rem 0.35rem;
  text-align: center;
}

.kyo-calc-telemetry-val {
  font-family: var(--font-mono);
  font-size: clamp(0.82rem, 0.35vw + 0.55rem, 0.95rem);
  font-weight: 800;
  color: #4ADE80;
  display: block;
}

.kyo-calc-telemetry-lbl {
  font-size: clamp(0.6rem, 0.15vw + 0.48rem, 0.66rem);
  color: #A9B8B1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  display: block;
  margin-top: 0.15rem;
}

.kyo-calc-solutions-switcher {
  display: none;
}

.kyo-calc-solutions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 0.85rem;
  text-align: left;
}

@media (max-width: 820px) {
  .kyo-calc-solutions-grid {
    grid-template-columns: 1fr;
  }
}

.kyo-calc-bottom-shelf {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.kyo-calc-solution-card {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-md);
  padding: 0.8rem 0.95rem;
  transition: all var(--transition-fast);
}

.kyo-calc-solution-card:hover {
  background: rgba(255, 255, 255, 0.11);
  border-color: rgba(255, 255, 255, 0.3);
}

.kyo-calc-solution-card--featured {
  background: linear-gradient(135deg, rgba(210, 84, 39, 0.22) 0%, rgba(255, 107, 53, 0.14) 100%);
  border-color: rgba(255, 107, 53, 0.55);
  box-shadow: 0 4px 18px rgba(210, 84, 39, 0.25);
}

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

.kyo-calc-solution-badge {
  font-size: 0.65rem;
  font-family: var(--font-mono);
  font-weight: 800;
  padding: 0.15rem 0.45rem;
  border-radius: var(--radius-full);
}

.kyo-calc-solution-badge--default {
  background: rgba(74, 222, 128, 0.15);
  color: #4ADE80;
  border: 1px solid rgba(74, 222, 128, 0.3);
}

.kyo-calc-solution-badge--featured {
  background: var(--color-terracotta);
  color: #FFFFFF;
}

.kyo-calc-solution-title {
  font-size: clamp(0.86rem, 0.35vw + 0.56rem, 0.98rem);
  font-weight: 700;
  color: #FFFFFF;
  margin: 0.15rem 0 0.25rem;
  line-height: 1.3;
}

.kyo-calc-solution-sub {
  font-size: clamp(0.72rem, 0.18vw + 0.56rem, 0.78rem);
  color: #C8D6CF;
  margin-bottom: 0.65rem;
  line-height: 1.38;
}

.kyo-calc-solution-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.kyo-calc-solution-price {
  font-family: var(--font-mono);
  font-size: clamp(0.94rem, 0.4vw + 0.72rem, 1.15rem);
  font-weight: 800;
  color: #4ADE80;
}

.kyo-calc-solution-price--featured {
  color: #4ADE80;
}

.kyo-calc-price-main {
  font-family: var(--font-mono);
  font-size: clamp(0.95rem, 0.4vw + 0.75rem, 1.15rem);
  font-weight: 800;
  line-height: 1.15;
}

.kyo-calc-price-old {
  font-size: 0.74rem;
  text-decoration: line-through;
  color: rgba(255, 255, 255, 0.45);
  font-weight: normal;
  line-height: 1.15;
  margin-left: 0.35rem;
}

/* ----------------- BRAND HERITAGE & MANUFAKTUR ----------------- */
.kyo-heritage-section {
  background-color: var(--color-sand);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  padding: 3.5rem 0;
}

.kyo-heritage-section .kyo-editorial-frame {
  height: 100%;
  min-height: 380px;
  max-height: none;
  aspect-ratio: auto;
  margin-bottom: 0;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--color-border);
  display: flex;
}

.kyo-heritage-section .kyo-editorial-frame img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.kyo-heritage-title {
  margin: 0.5rem 0 1.25rem;
  font-size: clamp(1.4rem, 2vw + 0.8rem, 2rem);
  font-weight: 800;
  color: var(--color-moss);
}

.kyo-heritage-lead {
  font-size: clamp(0.92rem, 0.25vw + 0.76rem, 1.05rem);
  line-height: 1.75;
  color: var(--color-moss);
  margin-bottom: 1.25rem;
}

.kyo-heritage-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: 1.5rem;
}

.kyo-heritage-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.kyo-heritage-metric-card {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
}

.kyo-heritage-metric-val {
  font-size: 1.5rem;
  font-weight: 800;
  font-family: var(--font-mono);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}

.kyo-heritage-metric-lbl {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  line-height: 1.3;
}

.kyo-val-terracotta { color: var(--color-terracotta); }
.kyo-val-sage { color: var(--color-sage); }
.kyo-val-moss { color: var(--color-moss); }

.kyo-calc-btn-sm {
  font-size: clamp(0.72rem, 0.2vw + 0.62rem, 0.82rem);
  font-weight: 700;
  padding: 0.4rem clamp(0.55rem, 0.5vw, 0.85rem);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: none;
  transition: all var(--transition-fast);
}

.kyo-calc-btn-sm--primary {
  background: var(--color-terracotta);
  color: #FFFFFF;
}

.kyo-calc-btn-sm--primary:hover {
  background: #E05A47;
  transform: translateY(-1px);
}

.kyo-calc-btn-sm--secondary {
  background: rgba(255, 255, 255, 0.15);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

.kyo-calc-btn-sm--secondary:hover {
  background: rgba(255, 255, 255, 0.25);
}

/* ----------------- EXPERT SELF-TEST OPTIONS (HIGH-CONTRAST LIGHT THEME) ----------------- */
.kyo-expert-q-block {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.kyo-expert-q-title {
  font-weight: 700;
  font-size: clamp(0.92rem, 0.3vw + 0.75rem, 1.05rem);
  color: var(--color-moss);
  margin-bottom: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kyo-expert-q-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.75rem;
}

.kyo-expert-opt-card {
  background: #FAF9F6;
  border: 2px solid #CBD5E1;
  border-radius: var(--radius-md);
  padding: 1rem 1.15rem;
  text-align: left;
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.45rem;
  position: relative;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  width: 100%;
  box-sizing: border-box;
}

.kyo-expert-opt-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}

.kyo-expert-opt-title {
  font-size: 0.98rem;
  font-weight: 700;
  color: #18231E;
  line-height: 1.3;
}

.kyo-expert-opt-radio {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #94A3B8;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.kyo-expert-opt-radio-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  transition: all 0.2s ease;
}

.kyo-expert-opt-desc {
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.45;
  font-weight: 500;
}

.kyo-expert-opt-card:hover {
  background: #FFFFFF;
  border-color: #2D4A3E;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(45, 74, 62, 0.12);
}

.kyo-expert-opt-card:hover .kyo-expert-opt-radio {
  border-color: #2D4A3E;
}

/* Selected state - Rich, Warm, Distinct & 100% Readable */
.kyo-expert-opt-card.selected {
  background: linear-gradient(135deg, #D25427 0%, #B84319 100%);
  border-color: #B84319;
  box-shadow: 0 8px 22px rgba(210, 84, 39, 0.35);
  transform: translateY(-2px);
}

.kyo-expert-opt-card.selected .kyo-expert-opt-title {
  color: #FFFFFF;
}

.kyo-expert-opt-card.selected .kyo-expert-opt-desc {
  color: #FEE8E0;
}

.kyo-expert-opt-card.selected .kyo-expert-opt-radio {
  border-color: #FFFFFF;
  background: #FFFFFF;
}

.kyo-expert-opt-card.selected .kyo-expert-opt-radio-dot {
  background: #D25427;
}

/* Expert Wizard Step Transitions & Navigation */
.js-expert-step {
  display: none;
}

.js-expert-step.active {
  display: block;
  animation: kyoStepFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.kyo-expert-result-box {
  animation: kyoStepFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

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

.kyo-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-moss);
  color: #FFFFFF;
  font-size: 0.82rem;
  font-weight: 800;
  flex-shrink: 0;
}

/* 3. TEXTIL-LABOR 4-SCHICHTEN EXPLORER (.kyo-layer-explorer) */
.kyo-layer-widget {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  margin: 3.5rem 0;
}

.kyo-layer-layout {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
}

@media (max-width: 860px) {
  .kyo-layer-layout {
    grid-template-columns: 1fr;
  }
}

.kyo-layer-controls {
  padding: 2.25rem;
  background: var(--color-sand-warm);
  border-right: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.kyo-layer-tab {
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-smooth);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.kyo-layer-tab:hover {
  transform: translateX(4px);
  border-color: var(--color-sage);
}

.kyo-layer-tab.active {
  background: var(--color-moss);
  color: #FFFFFF;
  border-color: var(--color-moss);
  box-shadow: 0 6px 18px rgba(24, 35, 30, 0.15);
}

.kyo-layer-tab-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-sand);
  color: var(--color-moss);
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.kyo-layer-tab.active .kyo-layer-tab-num {
  background: var(--color-terracotta);
  color: #FFFFFF;
}

.kyo-layer-tab-prefix {
  display: inline;
}

.kyo-layer-desc-full {
  display: block;
}

.kyo-layer-desc-short {
  display: none;
}

.kyo-layer-tab-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: inherit;
  margin-bottom: 0.15rem;
}

.kyo-layer-tab-desc {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.kyo-layer-tab.active .kyo-layer-tab-desc {
  color: rgba(255, 255, 255, 0.85);
}

.kyo-layer-display {
  padding: 2.5rem 2.25rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ----------------- PERSISTENT FLOATING COOKIE TRIGGER PILL ----------------- */
.kyo-cookie-pill {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  background: rgba(18, 28, 22, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #FFFFFF;
  padding: 0.6rem 1.05rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.18);
  z-index: 950;
  transition: all var(--transition-smooth);
}

.kyo-cookie-pill:hover {
  transform: translateY(-2.5px) scale(1.02);
  background: var(--color-moss-deep);
  border-color: rgba(210, 84, 39, 0.5);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
  color: #FFFFFF;
}

.kyo-cookie-pill-icon {
  font-size: 0.95rem;
  line-height: 1;
}

.kyo-cookie-pill-text {
  letter-spacing: 0.015em;
}

.kyo-cookie-pill-status {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10B981;
  box-shadow: 0 0 8px #10B981;
  display: inline-block;
  animation: kyoFloat 2s infinite ease-in-out;
}

@media (max-width: 640px) {
  .kyo-cookie-pill {
    bottom: 1rem;
    left: 1rem;
    padding: 0.45rem 0.85rem;
    font-size: 0.74rem;
  }
}

/* ----------------- PRINT STYLESHEET ----------------- */
@media print {
  .kyo-header, .kyo-topbar, .kyo-footer, .kyo-receipt-support-actions, .kyo-cookie-modal, .kyo-drawer-overlay, .kyo-btn {
    display: none !important;
  }
  body {
    background-color: #FFFFFF;
    color: #000000;
  }
  .kyo-receipt-card {
    box-shadow: none;
    border: 1px solid #000;
    margin: 0;
    padding: 1.5rem;
  }
}

/* ----------------- COMPACT USER-FRIENDLY CATALOG DROPDOWN ----------------- */
.kyo-header-subnav {
  position: relative;
}

.kyo-nav-item--has-mega {
  position: relative; /* Anchored directly below the button */
}

.kyo-nav-chevron {
  width: 14px;
  height: 14px;
  transition: transform var(--transition-fast);
  margin-left: 0.35rem;
}

.kyo-nav-item--has-mega:hover .kyo-nav-chevron,
.kyo-nav-item--has-mega.is-open .kyo-nav-chevron {
  transform: rotate(180deg);
  color: var(--color-terracotta);
}

.kyo-mega-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 660px;
  max-width: calc(100vw - 2rem);
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-terracotta);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
  padding: 1.2rem 1.35rem 1rem;
  z-index: 150;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  pointer-events: none;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.kyo-nav-item--has-mega:hover .kyo-mega-menu,
.kyo-nav-item--has-mega.is-open .kyo-mega-menu,
.kyo-mega-menu:hover {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

.kyo-dropdown-cat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
}

.kyo-dropdown-cat-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: var(--color-sand-warm);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-moss);
  transition: all var(--transition-fast);
}

.kyo-dropdown-cat-card:hover {
  background: #FFFFFF;
  border-color: var(--color-sage);
  transform: translateY(-2px);
  box-shadow: var(--shadow-subtle);
}

.kyo-dropdown-cat-card.active {
  background: #FFFFFF;
  border-color: var(--color-terracotta);
  box-shadow: 0 4px 12px rgba(210, 84, 39, 0.12);
}

.kyo-dropdown-cat-card.active .kyo-dropdown-cat-title {
  color: var(--color-terracotta);
}

.kyo-dropdown-cat-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.kyo-dropdown-cat-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-moss);
  margin-bottom: 0.2rem;
}

.kyo-dropdown-cat-card:hover .kyo-dropdown-cat-title {
  color: var(--color-terracotta);
}

.kyo-dropdown-cat-sub {
  font-size: 0.78rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.kyo-dropdown-cat-count {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-sage);
  background: rgba(74, 107, 98, 0.1);
  padding: 0.12rem 0.45rem;
  border-radius: 4px;
  display: inline-block;
  margin-top: 0.35rem;
}

.kyo-dropdown-footer {
  margin-top: 0.95rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--color-border-light);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kyo-dropdown-footer-link {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--color-moss);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.kyo-dropdown-footer-link:hover {
  color: var(--color-terracotta);
}

@media (max-width: 992px) {
  .kyo-nav-item--has-mega {
    position: relative;
    width: 100%;
  }
  .kyo-mega-menu {
    position: static;
    width: 100%;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    padding: 0.75rem 0 0.5rem;
  }
  .kyo-nav-item--has-mega.is-open .kyo-mega-menu {
    display: block;
  }
  .kyo-dropdown-cat-grid {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
}


/* Responsive Fluid Typography for Package Bento Cards */
.kyo-bento-card--organic h2 {
  font-size: clamp(0.92rem, 0.45vw + 0.55rem, 1.05rem);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kyo-bento-card--organic p {
  font-size: clamp(0.74rem, 0.12vw + 0.62rem, 0.8rem);
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kyo-bundle-thumb + div ul li {
  font-size: clamp(0.7rem, 0.1vw + 0.6rem, 0.76rem);
  line-height: 1.3;
}


/* ==========================================================================
   KYOLOOK UNIVERSAL FLUID RESPONSIVE TYPOGRAPHY
   Adapts text sizing gracefully to available container and screen width
   ========================================================================== */

/* 1. Fluid Container & Section Headers */
.kyo-section-header h2 {
  font-size: clamp(1.35rem, 2vw + 0.45rem, 1.95rem);
  line-height: 1.25;
  text-wrap: balance;
}

.kyo-section-header p {
  font-size: clamp(0.88rem, 0.3vw + 0.75rem, 1.05rem);
  line-height: 1.6;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  text-wrap: pretty;
}

/* 2. Fluid Diagnostic Quiz Typography */
.kyo-quiz-q-title {
  font-size: clamp(1.1rem, 1.5vw + 0.55rem, 1.5rem) !important;
  line-height: 1.3 !important;
  text-wrap: balance;
}

.kyo-quiz-rationale-box {
  font-size: clamp(0.82rem, 0.2vw + 0.72rem, 0.92rem) !important;
  line-height: 1.65 !important;
}

.kyo-quiz-result-hero h3 {
  font-size: clamp(1.2rem, 1.5vw + 0.5rem, 1.65rem) !important;
  line-height: 1.28 !important;
}

.kyo-quiz-result-card h3 {
  font-size: clamp(1rem, 0.4vw + 0.82rem, 1.25rem);
  line-height: 1.3;
}

.kyo-quiz-result-card p {
  font-size: clamp(0.82rem, 0.2vw + 0.74rem, 0.9rem);
  line-height: 1.5;
}

/* 3. Fluid Expert Sprechstunde Self-Test (IPSS) */
.kyo-expert-q-block > div:first-child {
  font-size: clamp(0.88rem, 0.3vw + 0.72rem, 1.02rem) !important;
  line-height: 1.4 !important;
}

.kyo-expert-opt-title {
  font-size: clamp(0.88rem, 0.25vw + 0.75rem, 0.98rem);
  font-weight: 700;
}

.kyo-expert-opt-desc {
  font-size: clamp(0.78rem, 0.2vw + 0.7rem, 0.86rem);
  line-height: 1.45;
}

/* 4. Fluid System Packages Cards */
.kyo-package-card h2,
.kyo-bento-card--organic h2 {
  font-size: clamp(0.92rem, 0.45vw + 0.55rem, 1.05rem) !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.kyo-package-card p,
.kyo-bento-card--organic p {
  font-size: clamp(0.74rem, 0.12vw + 0.62rem, 0.8rem) !important;
  line-height: 1.35 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.kyo-package-badge {
  font-size: clamp(0.68rem, 0.15vw + 0.58rem, 0.76rem) !important;
}

.kyo-package-price {
  font-size: clamp(1.15rem, 0.6vw + 0.55rem, 1.35rem) !important;
  line-height: 1 !important;
}

/* 5. Fluid Detail Page Specifications & Pricing */
.kyo-detail-price-current {
  font-size: clamp(1.4rem, 1.2vw + 1rem, 1.85rem) !important;
}

.kyo-detail-price-original {
  font-size: clamp(0.92rem, 0.4vw + 0.75rem, 1.1rem) !important;
}

.kyo-detail-meta-list {
  font-size: clamp(0.8rem, 0.2vw + 0.68rem, 0.9rem);
  line-height: 1.6;
}

/* 6. Form inputs and checkout labels fluid safety */
.kyo-form-label {
  font-size: clamp(0.78rem, 0.2vw + 0.68rem, 0.88rem);
}

.kyo-input, .kyo-select {
  font-size: clamp(0.85rem, 0.2vw + 0.75rem, 0.95rem);
}

/* 7. Safety clamps against text clipping and overflow */
* {
  min-width: 0;
}


/* Responsive Adaptive Showcase Card Layouts (Space-Optimized) */
.col-6.kyo-bento-card {
  padding: clamp(1.15rem, 1.4vw, 1.55rem);
}

.kyo-showcase-split {
  display: grid;
  grid-template-columns: 1fr clamp(180px, 18vw, 240px);
  gap: clamp(1.15rem, 1.6vw, 1.75rem);
  align-items: stretch;
  height: 100%;
  padding: 0;
}

.kyo-showcase-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-width: 0;
}

.kyo-showcase-title {
  font-size: clamp(1.12rem, 1.1vw + 0.55rem, 1.28rem);
  font-weight: 750;
  color: var(--color-moss);
  margin: 0.35rem 0 0.45rem;
  line-height: 1.25;
}

.kyo-showcase-desc {
  font-size: 0.88rem;
  line-height: 1.52;
  color: var(--color-text-secondary);
  margin: 0;
}

.kyo-showcase-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.65rem;
  margin-top: 0.95rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border-light);
  flex-wrap: wrap;
}

.kyo-showcase-price {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-moss);
  line-height: 1;
  white-space: nowrap;
}

.kyo-showcase-btns {
  display: flex;
  gap: 0.45rem;
  align-items: center;
  flex-wrap: nowrap;
}

.kyo-showcase-btns .kyo-btn {
  padding: 0.42rem 0.8rem;
  font-size: 0.84rem;
  white-space: nowrap;
}

@media (min-width: 769px) {
  .kyo-showcase-split > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
  }
}

.kyo-showcase-img {
  width: 100%;
  height: 100%;
  min-height: 190px;
  max-height: 240px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-border-light);
  background: var(--color-sand);
  display: block;
  transition: transform var(--transition-smooth);
}

.kyo-bento-card:hover .kyo-showcase-img {
  transform: scale(1.03);
}

.kyo-showcase-bundle-split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: clamp(1.25rem, 2vw, 2rem);
  width: 100%;
}

.kyo-showcase-bundle-img {
  width: clamp(200px, 20vw, 260px);
  height: clamp(150px, 15vw, 195px);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  border: 1px solid var(--color-border-light);
  flex-shrink: 0;
  display: block;
  transition: transform var(--transition-smooth);
}

.kyo-bento-card:hover .kyo-showcase-bundle-img {
  transform: scale(1.03);
}

@media (max-width: 640px) {
  .kyo-showcase-split {
    display: flex;
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 1.25rem;
  }
  .kyo-showcase-img {
    aspect-ratio: 16 / 10;
    max-height: 220px;
    width: 100%;
  }
  .kyo-showcase-bundle-split {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .kyo-showcase-bundle-img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    max-height: 220px;
  }
}

/* Button Row Flex Protection */
.kyo-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
}


/* ==========================================================================
   PRODUCT VARIANTS, VOLUME TIER DISCOUNTS & MOBILE STICKY BUY BAR
   ========================================================================== */

/* Product Variants Section (PDP) */
.kyo-pdp-variant-section {
  margin-bottom: 0.95rem;
  background: rgba(74, 107, 98, 0.05);
  border: 1px solid rgba(74, 107, 98, 0.16);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
}

.kyo-pdp-variant-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.65rem;
}

.kyo-pdp-variant-label {
  font-size: 0.86rem;
  font-weight: 750;
  color: var(--color-moss);
}

.kyo-pdp-selected-variant-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--color-terracotta);
  background: rgba(210, 84, 39, 0.1);
  padding: 0.15rem 0.65rem;
  border-radius: var(--radius-full);
}

.kyo-variant-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.kyo-variant-pill {
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid var(--color-border);
  background-color: #FFFFFF;
  color: var(--color-moss);
  font-size: 0.82rem;
  font-weight: 650;
  padding: 0.5rem 0.95rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.kyo-variant-pill:hover {
  border-color: var(--color-sage);
  background-color: var(--color-sand);
  transform: translateY(-1px);
}

.kyo-variant-pill.selected {
  border-color: var(--color-terracotta);
  background-color: var(--color-terracotta);
  color: #FFFFFF;
  font-weight: 750;
  box-shadow: 0 2px 8px rgba(210, 84, 39, 0.28);
}

/* Tiered Volume Discounts Enhancements */
.kyo-pdp-tier-label-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.45rem;
}

.kyo-pdp-tier-hint {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--color-terracotta);
}

.kyo-tier-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.25rem;
}

.kyo-tier-price {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-moss);
  margin-top: 0.25rem;
}

.kyo-tier-unit-note {
  font-size: 0.7rem;
  color: var(--color-text-muted);
  margin-top: 0.15rem;
}

.kyo-tier-option.selected .kyo-tier-price {
  color: var(--color-terracotta);
}

/* Product Card Badges on Catalog & Shop Grid */
.kyo-product-card-options-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.65rem;
}

.kyo-card-variant-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-sage);
  background: rgba(74, 107, 98, 0.08);
  border: 1px solid rgba(74, 107, 98, 0.2);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
}

.kyo-card-discount-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--color-terracotta);
  background: rgba(210, 84, 39, 0.08);
  border: 1px solid rgba(210, 84, 39, 0.22);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
}

/* Cart Drawer & Checkout Badges */
.kyo-cart-variant-tag {
  color: var(--color-moss);
  font-weight: 700;
}

.kyo-cart-variant-badge {
  font-size: 0.75rem;
  color: var(--color-sage);
  margin-top: 0.15rem;
}

.kyo-cart-tier-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--color-terracotta);
  background: rgba(210, 84, 39, 0.09);
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-full);
  margin-top: 0.2rem;
}

/* Mobile Sticky Bottom Buy Bar (PDP) */
.kyo-pdp-sticky-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 450;
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1.5px solid var(--color-border);
  box-shadow: 0 -6px 25px rgba(0, 0, 0, 0.12);
  padding: 0.65rem 1rem calc(0.65rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  transform: translateY(130%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.kyo-pdp-sticky-bar.visible {
  transform: translateY(0);
  pointer-events: auto;
}

.kyo-sticky-bar-info {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
  flex: 1;
}

.kyo-sticky-thumb {
  width: 44px;
  height: 44px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-light);
  flex-shrink: 0;
}

.kyo-sticky-meta {
  min-width: 0;
  flex: 1;
}

.kyo-sticky-title {
  font-size: 0.82rem;
  font-weight: 750;
  color: var(--color-moss);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.kyo-sticky-details {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.15rem;
}

.kyo-sticky-pill {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--color-sage);
  background: rgba(74, 107, 98, 0.08);
  padding: 0.1rem 0.45rem;
  border-radius: var(--radius-full);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 140px;
}

.kyo-sticky-price {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-terracotta);
  white-space: nowrap;
}

.kyo-sticky-cta-btn {
  flex-shrink: 0;
  padding: 0.6rem 1.15rem;
  font-size: 0.88rem;
  font-weight: 750;
  min-height: 44px;
  white-space: nowrap;
}

/* ==========================================================================
   COMPREHENSIVE MOBILE RESPONSIVE OVERHAUL (PHONE & TABLET UI/UX)
   ========================================================================== */

/* Universal Viewport & Horizontal Overflow Guard */
html, body {
  overflow-x: clip !important;
  max-width: 100vw;
  -webkit-overflow-scrolling: touch;
}

/* Touch Target Minimum (44px) & iOS Input Zoom Prevention (16px) */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px !important; /* Prevents iOS auto-zoom on focus */
    min-height: 46px;
    box-sizing: border-box;
  }

  .kyo-btn {
    min-height: 46px;
    padding: 0.65rem 1.2rem;
  }

  .kyo-icon-btn {
    min-width: 44px;
    min-height: 44px;
  }

  .kyo-qty-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 1.1rem !important;
  }

  .kyo-qty-val {
    min-width: 32px !important;
    font-size: 0.95rem !important;
  }

  /* Catalog Chips: Horizontal Swipe with Momentum */
  .kyo-catalog-filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 0.5rem;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
  }
  .kyo-catalog-filter-bar::-webkit-scrollbar {
    display: none;
  }
  .kyo-catalog-filter-bar .kyo-btn {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* Bento Grids Collapse to 1 Column */
  .kyo-grid-12,
  .kyo-bento-grid,
  .kyo-features-grid,
  .kyo-evidence-grid,
  .kyo-comparison-grid,
  .kyo-team-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  .col-12, .col-11, .col-10, .col-9, .col-8, .col-7, .col-6, .col-5, .col-4, .col-3, .col-2, .col-1 {
    grid-column: span 12 !important;
  }

  /* ==========================================================================
     MOBILE PRODUCT DETAIL PAGE (PDP) - USER-FRIENDLY CENTERED HIERARCHY
     ========================================================================== */
  .kyo-pdp-hero {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    text-align: center !important;
  }

  /* Unbox column containers so all direct children can be ordered ergonomically */
  .kyo-pdp-visual-col,
  .kyo-pdp-buy-col {
    display: contents !important;
  }

  /* 1. Header (Eyebrow, Title, SKU, Stock status) - Centered */
  .kyo-pdp-header-block {
    order: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 0.2rem !important;
    margin-bottom: 0.2rem !important;
  }

  .kyo-pdp-header-block .kyo-eyebrow {
    font-size: 0.65rem !important;
    letter-spacing: 0.08em !important;
    color: var(--color-sage) !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .kyo-pdp-title {
    font-size: 1.35rem !important;
    line-height: 1.2 !important;
    margin: 0.1rem 0 !important;
    color: var(--color-moss) !important;
    font-weight: 800 !important;
    text-align: center !important;
  }

  .kyo-pdp-subtitle {
    font-size: 0.82rem !important;
    line-height: 1.35 !important;
    color: var(--color-text-secondary) !important;
    margin: 0 auto 0.25rem auto !important;
    text-align: center !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    max-width: 95% !important;
  }

  .kyo-pdp-meta-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    flex-wrap: wrap !important;
    margin: 0 auto 0.2rem auto !important;
    text-align: center !important;
  }

  .kyo-pdp-sku-badge {
    font-size: 0.68rem !important;
    padding: 0.12rem 0.45rem !important;
    border-radius: var(--radius-full) !important;
    background: var(--color-sand) !important;
    color: var(--color-moss) !important;
    font-weight: 750 !important;
  }

  .kyo-pdp-stock-badge {
    font-size: 0.72rem !important;
    font-weight: 650 !important;
  }

  .kyo-pdp-delivery-badge {
    font-size: 0.68rem !important;
    border-left: none !important;
    padding: 0.12rem 0.45rem !important;
    background: rgba(74, 107, 98, 0.08) !important;
    color: var(--color-moss) !important;
    border-radius: var(--radius-full) !important;
    font-weight: 650 !important;
  }

  /* 2. Product Image Gallery (Immediately under title) - Centered */
  .kyo-gallery-main {
    order: 2 !important;
    padding: 0 !important;
    border-radius: 14px !important;
    background: transparent !important;
    border: 1px solid var(--color-border) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
    margin: 0 auto 0.35rem auto !important;
    position: relative !important;
    max-width: 100% !important;
  }

  .kyo-gallery-main img {
    max-height: 280px !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .kyo-pdp-badge {
    top: 0.75rem !important;
    left: 0.75rem !important;
    font-size: 0.68rem !important;
    padding: 0.2rem 0.55rem !important;
  }

  /* 3. Product Variant Selector (Optionen/Größe) - Centered */
  .kyo-pdp-variant-section {
    order: 3 !important;
    margin: 0.15rem 0 !important;
    padding: 0.55rem 0.75rem !important;
    background: #FAF8F5 !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 10px !important;
    text-align: center !important;
  }

  .kyo-pdp-variant-label-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.35rem !important;
  }

  .kyo-pdp-variant-label {
    font-size: 0.76rem !important;
    font-weight: 750 !important;
  }

  .kyo-pdp-selected-variant-name {
    font-size: 0.76rem !important;
    font-weight: 750 !important;
    color: var(--color-terracotta) !important;
    padding: 0.1rem 0.5rem !important;
    background: rgba(210, 84, 39, 0.08) !important;
    border-radius: 999px !important;
  }

  .kyo-variant-pills-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.35rem !important;
  }

  .kyo-variant-pill {
    flex: 1 1 calc(50% - 0.35rem) !important;
    padding: 0 0.5rem !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    min-height: 34px !important;
    height: 34px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* 4. Tiered Volume Discounts (Staffel-Rabatt Chips) - Centered */
  .kyo-pdp-tier-section {
    order: 4 !important;
    margin: 0.25rem 0 0.15rem !important;
    background: #FFFFFF !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 10px !important;
    padding: 0.55rem 0.65rem !important;
    text-align: center !important;
  }

  .kyo-pdp-tier-label-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.3rem !important;
  }

  .kyo-pdp-tier-label {
    font-size: 0.76rem !important;
    font-weight: 750 !important;
    margin-bottom: 0 !important;
    color: var(--color-moss) !important;
  }

  .kyo-pdp-tier-hint {
    font-size: 0.70rem !important;
    color: var(--color-sage) !important;
    font-weight: 700 !important;
  }

  .kyo-tier-selector {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.35rem !important;
  }

  .kyo-tier-option {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.45rem 0.2rem !important;
    min-height: 52px !important;
    border-radius: 8px !important;
    border: 1.5px solid var(--color-border) !important;
    background: #FFFFFF !important;
  }

  .kyo-tier-option.selected {
    border-color: var(--color-terracotta) !important;
    background-color: var(--color-terracotta-soft) !important;
  }

  .kyo-tier-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.05rem !important;
  }

  .kyo-tier-qty {
    font-size: 0.78rem !important;
    font-weight: 750 !important;
    line-height: 1.15 !important;
  }

  .kyo-tier-badge {
    font-size: 0.58rem !important;
    padding: 0.08rem 0.28rem !important;
    margin-top: 0.05rem !important;
    border-radius: 4px !important;
    line-height: 1.1 !important;
  }

  .kyo-tier-sub {
    font-size: 0.64rem !important;
    line-height: 1.1 !important;
  }

  .kyo-tier-price {
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    margin-top: 0.1rem !important;
    line-height: 1.1 !important;
  }

  .kyo-tier-unit-note {
    font-size: 0.58rem !important;
    color: var(--color-text-muted) !important;
    margin-top: 0.02rem !important;
    line-height: 1.1 !important;
  }

  /* 5. Price Box (Directly displays updated price above Buy Button) - Centered */
  .kyo-detail-price-box {
    order: 5 !important;
    padding: 0.55rem 0.85rem !important;
    margin: 0.2rem 0 !important;
    border-radius: 10px !important;
    background: #FAF8F5 !important;
    border: 1px solid var(--color-border) !important;
    text-align: center !important;
  }

  .kyo-detail-price-row {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    text-align: center !important;
  }

  .kyo-pdp-price-wrap {
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    gap: 0.45rem !important;
  }

  .kyo-detail-price-current {
    font-family: var(--font-mono) !important;
    font-size: 1.6rem !important;
    font-weight: 850 !important;
    color: var(--color-moss) !important;
    line-height: 1 !important;
    text-align: center !important;
  }

  .kyo-detail-tax-shipping {
    font-size: 0.70rem !important;
    margin-top: 0.25rem !important;
    line-height: 1.35 !important;
    color: var(--color-text-secondary) !important;
    display: block !important;
    text-align: center !important;
  }

  /* 6. Primary CTA Buy Button (Right below price!) - Centered */
  .kyo-pdp-cta-row {
    order: 6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    margin: 0.25rem 0 0.35rem !important;
  }

  .kyo-pdp-buy-btn {
    flex: 1 !important;
    height: 48px !important;
    min-height: 48px !important;
    font-size: 0.96rem !important;
    font-weight: 800 !important;
    border-radius: 10px !important;
    background: var(--color-terracotta) !important;
    color: #FFFFFF !important;
    box-shadow: 0 4px 14px rgba(210, 84, 39, 0.28) !important;
    letter-spacing: 0.01em !important;
    padding: 0 0.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
  }

  .kyo-pdp-buy-btn svg {
    width: 18px !important;
    height: 18px !important;
  }

  .kyo-pdp-wish-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
  }

  /* 7. Quick Guarantee (3 Equal Symmetrical Badges in 1 Row) - Centered */
  .kyo-pdp-quick-guarantee {
    order: 7 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.35rem !important;
    margin: 0.2rem 0 0.55rem !important;
    text-align: center !important;
  }

  .kyo-guarantee-pill {
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: rgba(74, 107, 98, 0.06) !important;
    border: 1px solid rgba(74, 107, 98, 0.12) !important;
    padding: 0.25rem 0.2rem !important;
    border-radius: 6px !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    color: var(--color-moss) !important;
  }

  .kyo-guarantee-bullet {
    display: none !important;
  }

  /* 8. 3 Functional Benefits */
  .kyo-pdp-benefits-grid {
    order: 8 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    margin-bottom: 0.55rem !important;
  }

  .kyo-pdp-benefit-card {
    padding: 0.5rem 0.75rem !important;
    border-radius: 8px !important;
  }

  .kyo-pdp-benefit-title {
    font-size: 0.78rem !important;
    margin-bottom: 0.1rem !important;
  }

  .kyo-pdp-benefit-desc {
    font-size: 0.70rem !important;
    line-height: 1.3 !important;
  }

  /* 9. Trust Reassurance Card */
  .kyo-pdp-trust-card {
    order: 9 !important;
    padding: 0.65rem 0.85rem !important;
    border-radius: 10px !important;
    gap: 0.45rem !important;
    margin-bottom: 0.85rem !important;
  }

  .kyo-pdp-trust-item {
    gap: 0.55rem !important;
  }

  .kyo-pdp-trust-icon {
    font-size: 1.05rem !important;
  }

  .kyo-pdp-trust-item strong {
    font-size: 0.78rem !important;
  }

  .kyo-pdp-trust-item p {
    font-size: 0.70rem !important;
    line-height: 1.3 !important;
  }

  /* 8. 3 Functional Benefits */
  .kyo-pdp-benefits-grid {
    order: 8 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    margin-bottom: 0.55rem !important;
  }

  .kyo-pdp-benefit-card {
    padding: 0.5rem 0.75rem !important;
    border-radius: 8px !important;
  }

  .kyo-pdp-benefit-title {
    font-size: 0.78rem !important;
    margin-bottom: 0.1rem !important;
  }

  .kyo-pdp-benefit-desc {
    font-size: 0.70rem !important;
    line-height: 1.3 !important;
  }

  /* 9. Trust Reassurance Card */
  .kyo-pdp-trust-card {
    order: 9 !important;
    padding: 0.65rem 0.85rem !important;
    border-radius: 10px !important;
    gap: 0.45rem !important;
    margin-bottom: 0.85rem !important;
  }

  .kyo-pdp-trust-item {
    gap: 0.55rem !important;
  }

  .kyo-pdp-trust-icon {
    font-size: 1.05rem !important;
  }

  .kyo-pdp-trust-item strong {
    font-size: 0.78rem !important;
  }

  .kyo-pdp-trust-item p {
    font-size: 0.70rem !important;
    line-height: 1.3 !important;
  }

  /* 10. Mobile Sticky Buy Bar (Proportional, Compact & User-Friendly) */
  .kyo-pdp-sticky-bar {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 0.35rem 0.65rem !important;
    gap: 0.45rem !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-top: 1px solid var(--color-border) !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
    height: 50px !important;
    box-sizing: border-box !important;
    z-index: 950 !important;
  }

  .kyo-sticky-bar-info {
    gap: 0.45rem !important;
    min-width: 0 !important;
    flex: 1 !important;
  }

  .kyo-sticky-thumb {
    width: 36px !important;
    height: 36px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  .kyo-sticky-meta {
    min-width: 0 !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 0.05rem !important;
  }

  .kyo-sticky-title {
    font-size: 0.76rem !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    color: var(--color-moss) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .kyo-sticky-details {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    margin-top: 0 !important;
    line-height: 1 !important;
  }

  .kyo-sticky-pill {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    padding: 0.05rem 0.3rem !important;
    border-radius: 4px !important;
    background: rgba(74, 107, 98, 0.08) !important;
    color: var(--color-moss) !important;
    max-width: 65px !important;
    line-height: 1.1 !important;
  }

  .kyo-sticky-price {
    font-family: var(--font-mono) !important;
    font-size: 0.86rem !important;
    font-weight: 800 !important;
    color: var(--color-terracotta) !important;
    line-height: 1 !important;
  }

  .kyo-sticky-cta-btn {
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 0.65rem !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    border-radius: 8px !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 2px 8px rgba(210, 84, 39, 0.25) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* PDP Bento Deep Knowledge Section */
  .kyo-pdp-details-grid {
    grid-template-columns: 1fr !important;
    gap: 1.25rem !important;
  }

  /* Specs Table Overflow Guard */
  .kyo-pdp-specs-table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Cart Drawer Full Width & High-Performance on Phones */
  .kyo-drawer-cart {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    z-index: 99995 !important;
    background-color: var(--color-sand-warm) !important;
  }

  .kyo-drawer-overlay {
    z-index: 99990 !important;
  }

  .kyo-drawer-header {
    padding: 0.75rem 1rem !important;
    flex-shrink: 0 !important;
    background: #FFFFFF !important;
  }

  .kyo-shipping-bar-box {
    padding: 0.45rem 1rem !important;
    flex-shrink: 0 !important;
    background: #FFFFFF !important;
  }

  .kyo-shipping-bar-text {
    font-size: 0.74rem !important;
    margin-bottom: 0.25rem !important;
  }

  .kyo-shipping-progress {
    height: 4px !important;
  }

  /* Body: allocates MAX vertical space for product items */
  .kyo-drawer-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.65rem 0.85rem !important;
  }

  /* Compact, proportional product bento cards */
  .kyo-cart-item-bento {
    padding: 0.65rem 0.75rem !important;
    gap: 0.5rem !important;
    margin-bottom: 0.55rem !important;
    border-radius: var(--radius-md) !important;
    background: #FFFFFF !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  }

  .kyo-cart-row-top {
    gap: 0.65rem !important;
  }

  .kyo-cart-item-img {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    min-height: 54px !important;
    border-radius: var(--radius-sm) !important;
  }

  .kyo-cart-item-sku-line {
    font-size: 0.66rem !important;
    margin-bottom: 0.1rem !important;
  }

  .kyo-cart-item-title-line {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin-top: 0.1rem !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .kyo-cart-variant-badge {
    font-size: 0.66rem !important;
    padding: 0.1rem 0.35rem !important;
    margin-top: 0.15rem !important;
  }

  .kyo-cart-tier-tag {
    font-size: 0.64rem !important;
    padding: 0.1rem 0.35rem !important;
    margin-top: 0.15rem !important;
  }

  .kyo-cart-row-bottom {
    padding-top: 0.4rem !important;
  }

  .kyo-qty-stepper {
    height: 26px !important;
  }

  .kyo-qty-btn {
    width: 24px !important;
    height: 24px !important;
    font-size: 0.85rem !important;
  }

  .kyo-qty-val {
    font-size: 0.78rem !important;
    min-width: 20px !important;
  }

  .kyo-cart-item-price-val {
    font-size: 0.90rem !important;
  }

  /* Compact drawer footer */
  .kyo-drawer-footer {
    flex-shrink: 0 !important;
    padding: 0.6rem 0.95rem max(0.85rem, env(safe-area-inset-bottom)) 0.95rem !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08) !important;
    background-color: #FFFFFF !important;
    border-top: 1px solid var(--color-border) !important;
  }

  .kyo-drawer-promo-collapse {
    margin-bottom: 0.4rem !important;
    border-radius: var(--radius-sm) !important;
  }

  .kyo-drawer-promo-summary {
    padding: 0.3rem 0.55rem !important;
    font-size: 0.72rem !important;
  }

  .kyo-drawer-promo-collapse .kyo-promo-input-row {
    padding: 0.25rem 0.45rem 0.45rem !important;
    gap: 0.35rem !important;
  }

  .kyo-promo-input {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.78rem !important;
    height: 32px !important;
  }

  .kyo-promo-input-row .kyo-btn {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.78rem !important;
    height: 32px !important;
  }

  .kyo-summary-line {
    font-size: 0.78rem !important;
    margin-bottom: 0.18rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
  }

  .kyo-summary-line.total {
    font-size: 1.00rem !important;
    padding-top: 0.3rem !important;
    margin-top: 0.3rem !important;
    margin-bottom: 0.15rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 0.5rem !important;
  }

  .kyo-summary-line.total > span:first-child {
    flex: 1 1 auto !important;
    font-weight: 750 !important;
  }

  .kyo-summary-line.total > span:last-child {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    font-family: var(--font-mono) !important;
  }

  .kyo-drawer-tax-note {
    font-size: 0.66rem !important;
    color: var(--color-text-muted) !important;
    margin-bottom: 0.4rem !important;
    text-align: right !important;
  }

  .kyo-drawer-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.3rem !important;
  }

  .kyo-cart-checkout-btn {
    padding: 0.62rem 1rem !important;
    font-size: 0.88rem !important;
    font-weight: 750 !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-md) !important;
  }

  .kyo-cart-continue-btn {
    padding: 0.38rem 1rem !important;
    font-size: 0.76rem !important;
    min-height: 32px !important;
    margin: 0 !important;
    background: transparent !important;
    border-color: var(--color-border) !important;
    color: var(--color-text-secondary) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-md) !important;
  }

  .kyo-cart-continue-btn:hover {
    background: var(--color-sand) !important;
    color: var(--color-moss) !important;
  }

  /* Header subnav open state styling */
  .kyo-header-subnav.is-mobile-open {
    padding: 1.25rem 1rem !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  }

  /* Cookie Modal High-Performance Bottom-Sheet (Phone & Tablet) */
  .kyo-cookie-backdrop {
    z-index: 100000 !important;
  }

  .kyo-cookie-modal {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: translateY(105%) !important;
    width: 100% !important;
    max-width: 100vw !important;
    max-height: 88vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 20px 20px 0 0 !important;
    border: none !important;
    border-top: 1px solid var(--color-border) !important;
    background: #FFFFFF !important;
    box-shadow: 0 -12px 45px rgba(0, 0, 0, 0.38) !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    z-index: 100001 !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease !important;
  }

  .kyo-cookie-modal.visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .kyo-cookie-modal-header {
    flex-shrink: 0 !important;
    background: #FFFFFF !important;
    padding: 0.85rem 1.15rem 0.65rem !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 0 !important;
  }

  .kyo-cookie-modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 0.85rem 1.15rem 0.85rem !important;
    box-sizing: border-box !important;
  }

  .kyo-cookie-modal-title {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    margin-bottom: 0.4rem !important;
  }

  .kyo-cookie-modal-desc {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.75rem !important;
  }

  .kyo-cookie-categories {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    margin-bottom: 0.5rem !important;
    max-height: none !important;
  }

  .kyo-cookie-cat-card {
    padding: 0.75rem 0.85rem !important;
    border-radius: var(--radius-md) !important;
  }

  .kyo-cookie-details-box {
    margin-top: 0.45rem !important;
    padding: 0.45rem 0.65rem !important;
  }

  .kyo-cookie-file-row {
    padding: 0.3rem 0 !important;
    font-size: 0.74rem !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .kyo-cookie-modal-footer {
    flex-shrink: 0 !important;
    background: #FFFFFF !important;
    border-top: 1px solid var(--color-border) !important;
    padding: 0.75rem 1.15rem max(0.85rem, env(safe-area-inset-bottom)) !important;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.08) !important;
    z-index: 20 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .kyo-cookie-links-info {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-size: 0.72rem !important;
    color: var(--color-text-muted) !important;
    margin-bottom: 0.15rem !important;
  }

  .kyo-cookie-modal-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
    width: 100% !important;
  }

  .kyo-cookie-modal-buttons #kyoCookieAcceptAll {
    width: 100% !important;
    min-height: 42px !important;
    font-size: 0.88rem !important;
    font-weight: 800 !important;
    justify-content: center !important;
  }

  .kyo-cookie-btn-subgroup {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
    width: 100% !important;
  }

  .kyo-cookie-btn-subgroup .kyo-btn {
    width: 100% !important;
    min-height: 38px !important;
    font-size: 0.76rem !important;
    padding: 0.4rem 0.3rem !important;
    white-space: nowrap !important;
    justify-content: center !important;
    text-align: center !important;
  }

  /* Footer Pillars Stack */
  .kyo-footer-pillars {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
}

/* Extra Small Phones (iPhone SE, 375px) */
@media (max-width: 480px) {
  .kyo-container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .kyo-variant-pill {
    flex: 1 1 calc(50% - 0.5rem);
    text-align: center;
    padding: 0.5rem 0.5rem;
    font-size: 0.78rem;
  }

  .kyo-pdp-cta-row {
    flex-direction: row;
    gap: 0.5rem;
  }

  .kyo-pdp-buy-btn {
    flex: 1;
  }

  .kyo-sticky-pill {
    max-width: 95px;
  }
}


/* -------------------------------------------------------------
   COOKIE PILL & STICKY BUY BAR SEPARATION (NO OVERLAPPING)
   ------------------------------------------------------------- */
body.kyo-has-sticky-bar .kyo-cookie-pill,
body:has(.kyo-pdp-sticky-bar.visible) .kyo-cookie-pill {
  bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
  transition: bottom 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s ease, opacity 0.2s ease;
  z-index: 460 !important;
}

@media (max-width: 640px) {
  body.kyo-has-sticky-bar .kyo-cookie-pill,
  body:has(.kyo-pdp-sticky-bar.visible) .kyo-cookie-pill {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0.75rem !important;
    padding: 0.35rem 0.65rem !important;
    font-size: 0.7rem !important;
  }
}

/* Dedicated Cart Page Bento Enhancements */
.kyo-cart-action-bar,
.kyo-wishlist-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.75rem 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: var(--shadow-subtle);
}

/* ==========================================================================
   REFINED LUXURY CART PAGE (WARENKORB.HTML) - BALANCED FLEX LAYOUT
   ========================================================================== */

/* Cart Item Card - Unified Flex Structure (Visual + Content Column) */
.kyo-cart-page-item {
  background: #FFFFFF;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  margin-bottom: 1rem;
}

.kyo-cart-page-item:hover {
  border-color: var(--color-sage);
  box-shadow: 0 8px 24px rgba(46, 75, 63, 0.08);
}

/* 1. Main Row: Thumbnail + Details */
.kyo-cart-item-main-row {
  display: flex;
  align-items: flex-start;
  gap: 1.25rem;
}

.kyo-cart-item-visual {
  width: 96px;
  height: 96px;
  flex-shrink: 0;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-sand);
  border: 1px solid var(--color-border-light);
  align-self: flex-start;
}

.kyo-cart-item-visual img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

.kyo-cart-page-item:hover .kyo-cart-item-visual img {
  transform: scale(1.04);
}

/* 2. Main Content Area (Column with Header, Tags, and Footer) */
.kyo-cart-item-info,
.kyo-cart-item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 0.45rem;
}

/* Top Row: Title on Left, Total Price on Right */
.kyo-cart-item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

.kyo-cart-item-title-wrap {
  flex: 1;
  min-width: 0;
}

.kyo-cart-item-sku {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 750;
  color: var(--color-sage);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.2rem;
}

.kyo-cart-item-title {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--color-moss);
  margin: 0;
  line-height: 1.35;
}

.kyo-cart-item-title a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.kyo-cart-item-title a:hover {
  color: var(--color-terracotta);
}

/* Pricing in Top Right */
.kyo-cart-item-pricing {
  text-align: right;
  flex-shrink: 0;
}

.kyo-cart-item-total {
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--color-moss);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.kyo-cart-item-unit {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
  white-space: nowrap;
}

/* Middle Row: Variant, Tier Discount & Feature Pills */
.kyo-cart-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.kyo-cart-variant-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-moss);
  background: rgba(74, 107, 98, 0.09);
  border: 1px solid rgba(74, 107, 98, 0.22);
  padding: 0.22rem 0.65rem;
  border-radius: var(--radius-full);
}

.kyo-cart-variant-pill strong {
  font-weight: 750;
  color: var(--color-moss);
}

.kyo-cart-discount-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  font-weight: 750;
  color: var(--color-terracotta);
  background: rgba(210, 84, 39, 0.09);
  border: 1px solid rgba(210, 84, 39, 0.25);
  padding: 0.22rem 0.65rem;
  border-radius: var(--radius-full);
}

.kyo-cart-nudge-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--color-sage);
  background: rgba(74, 107, 98, 0.05);
  border: 1px dashed rgba(74, 107, 98, 0.3);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
}

/* Bottom Row: Stepper + Remove on Left, Delivery / Stock on Right */
.kyo-cart-item-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-top: 0.65rem;
  border-top: 1px solid var(--color-border-light);
  margin-top: 0.25rem;
}

.kyo-cart-item-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.kyo-cart-action-separator {
  display: inline-block;
  width: 1px;
  height: 18px;
  background-color: var(--color-border);
}

.kyo-cart-item-remove-btn {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 550;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  transition: color var(--transition-fast), background-color var(--transition-fast);
  padding: 0.3rem 0.5rem;
  border-radius: var(--radius-sm);
}

.kyo-cart-item-remove-btn:hover {
  color: var(--color-terracotta);
  background: rgba(210, 84, 39, 0.08);
}

.kyo-cart-item-stock {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-moss);
}

.kyo-stock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #2e7d32;
  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.2);
  display: inline-block;
}

.kyo-stock-full {
  display: inline;
}

.kyo-stock-short {
  display: none;
}

.kyo-stock-compact {
  display: none;
}

/* Mobile & Tablet Responsiveness */
@media (max-width: 768px) {
  .kyo-cart-page-item {
    gap: 0.75rem;
    padding: 1rem;
  }

  .kyo-cart-item-main-row {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
  }

  .kyo-cart-item-visual {
    width: 84px;
    height: 84px;
  }

  .kyo-cart-item-title {
    font-size: 1rem;
  }

  .kyo-cart-item-total {
    font-size: 1.2rem;
  }
}

@media (max-width: 640px) {
  .kyo-cart-page-item {
    padding: 0.75rem 0.85rem !important;
    gap: 0.55rem !important;
    border-radius: 12px !important;
    margin-bottom: 0.75rem !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.04) !important;
  }

  /* 1. TOP ROW: Side-by-side Large Thumbnail + Info */
  .kyo-cart-item-main-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 0.85rem !important;
  }

  /* Crisp, proportional product thumbnail */
  .kyo-cart-item-visual {
    width: 76px !important;
    height: 76px !important;
    min-width: 76px !important;
    min-height: 76px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    background-color: #FAF8F5 !important;
    border: 1px solid var(--color-border-light) !important;
    overflow: hidden !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  }

  .kyo-cart-item-img {
    width: 60px !important;
    height: 60px !important;
    min-width: 60px !important;
    border-radius: 8px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
  }

  .kyo-cart-item-visual img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    display: block !important;
  }

  .kyo-cart-item-info,
  .kyo-cart-item-content {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    gap: 0.25rem !important;
  }

  .kyo-cart-item-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.1rem !important;
  }

  .kyo-cart-item-sku {
    font-size: 0.65rem !important;
    margin-bottom: 0.1rem !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    color: var(--color-sage) !important;
    font-weight: 750 !important;
  }

  .kyo-cart-item-title {
    font-size: 0.90rem !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    color: var(--color-moss) !important;
    margin: 0 !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .kyo-cart-item-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.3rem !important;
    margin: 0.1rem 0 !important;
  }

  .kyo-cart-variant-pill {
    font-size: 0.70rem !important;
    padding: 0.18rem 0.5rem !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    background: rgba(74, 107, 98, 0.08) !important;
    border: 1px solid rgba(74, 107, 98, 0.2) !important;
    border-radius: 999px !important;
    color: var(--color-moss) !important;
    font-weight: 600 !important;
  }

  .kyo-cart-variant-pill svg {
    flex-shrink: 0 !important;
  }

  .kyo-cart-discount-pill,
  .kyo-cart-nudge-pill {
    font-size: 0.68rem !important;
    padding: 0.16rem 0.45rem !important;
    white-space: nowrap !important;
  }

  .kyo-cart-item-pricing {
    display: flex !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 0.35rem !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
  }

  .kyo-cart-item-total {
    font-family: var(--font-heading) !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    color: var(--color-moss) !important;
    white-space: nowrap !important;
    letter-spacing: -0.01em !important;
    line-height: 1 !important;
  }

  .kyo-cart-item-unit {
    font-size: 0.70rem !important;
    color: var(--color-text-muted) !important;
    margin-top: 0 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }

  /* 2. FOOTER ROW: Stepper & Remove on Left, Stock on Right (Unified Single Row, Zero Wasted Space!) */
  .kyo-cart-item-footer {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 0.4rem 0.5rem !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid var(--color-border-light) !important;
    margin-top: 0.2rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .kyo-cart-item-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    flex-shrink: 0 !important;
  }

  .kyo-qty-stepper {
    height: 28px !important;
    border-radius: 6px !important;
    background: #FAF8F5 !important;
    border: 1px solid var(--color-border) !important;
  }

  .kyo-qty-btn {
    width: 26px !important;
    height: 28px !important;
    font-size: 0.95rem !important;
    line-height: 1 !important;
  }

  .kyo-qty-val {
    min-width: 20px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
  }

  .kyo-cart-item-remove-btn {
    font-size: 0.74rem !important;
    padding: 0.2rem 0.35rem !important;
    color: var(--color-text-muted) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.2rem !important;
    border: none !important;
    background: transparent !important;
    cursor: pointer !important;
  }

  .kyo-cart-item-remove-btn:hover {
    color: var(--color-terracotta) !important;
  }

  .kyo-cart-item-stock {
    font-size: 0.70rem !important;
    color: var(--color-moss) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    white-space: nowrap !important;
    margin-left: auto !important;
    flex-shrink: 0 !important;
    max-width: 100% !important;
  }

  .kyo-stock-dot {
    width: 6px !important;
    height: 6px !important;
    flex-shrink: 0 !important;
  }

  .kyo-stock-full {
    display: none !important;
  }

  .kyo-stock-short {
    display: none !important;
  }

  .kyo-stock-compact {
    display: inline !important;
  }

  /* Compact Cart Action Bar */
  #kyoCartActionBar {
    padding: 0.65rem 0.85rem !important;
    margin-bottom: 0.85rem !important;
  }

  #kyoCartCountText {
    font-size: 0.88rem !important;
    white-space: nowrap !important;
  }

  /* Compact Shipping Progress Bar */
  .kyo-shipping-bar-box {
    padding: 0.75rem 0.85rem !important;
    border-radius: 10px !important;
    border: 1px solid var(--color-border) !important;
  }

  /* Cart Summary Card on Mobile */
  .kyo-cart-summary-card {
    padding: 1rem !important;
    border-radius: 12px !important;
  }

  .kyo-cart-summary-title {
    font-size: 1.12rem !important;
    margin-bottom: 0.85rem !important;
    padding-bottom: 0.55rem !important;
  }

  .kyo-promo-input-row {
    display: flex !important;
    gap: 0.45rem !important;
    margin-bottom: 0.85rem !important;
    align-items: center !important;
  }

  .kyo-promo-input {
    font-size: 0.80rem !important;
    padding: 0.35rem 0.65rem !important;
    height: 36px !important;
    min-height: 36px !important;
    border-radius: var(--radius-sm) !important;
  }

  #kyoFullPromoBtn,
  #kyoDrawerPromoBtn,
  .kyo-promo-input-row .kyo-btn {
    font-size: 0.80rem !important;
    padding: 0 0.85rem !important;
    height: 36px !important;
    min-height: 36px !important;
    white-space: nowrap !important;
    border-radius: var(--radius-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .kyo-summary-line {
    font-size: 0.85rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 0.5rem !important;
    white-space: normal !important;
  }

  .kyo-summary-line.total {
    font-size: 1.08rem !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 0.5rem !important;
    white-space: normal !important;
  }

  .kyo-summary-line.total > span:first-child {
    flex: 1 1 auto !important;
    font-weight: 750 !important;
  }

  .kyo-summary-line.total > span:last-child {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    font-family: var(--font-mono) !important;
  }

  .kyo-cod-notice-card,
  .kyo-cart-discreet-ship-badge {
    padding: 0.85rem 1rem !important;
    gap: 0.65rem !important;
    margin-bottom: 0.75rem !important;
  }

  .kyo-cod-notice-content strong,
  .kyo-cart-discreet-ship-badge strong {
    font-size: 0.84rem !important;
  }

  .kyo-cod-notice-content p,
  .kyo-cart-discreet-ship-badge p {
    font-size: 0.76rem !important;
    line-height: 1.4 !important;
    margin-top: 0.2rem !important;
  }

  .kyo-cart-checkout-btn {
    font-size: 0.88rem !important;
    padding: 0.78rem 1rem !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .kyo-cart-continue-btn {
    font-size: 0.82rem !important;
    padding: 0.6rem 1rem !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .kyo-article-btn,
  .kyo-journal-card .kyo-btn {
    font-size: 0.78rem !important;
    padding: 0.35rem 0.75rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
  }
}

/* Cart Summary Card in Right Column */
.kyo-cart-summary-card {
  background: #FFFFFF;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  position: sticky;
  top: 96px;
}

.kyo-cart-summary-title {
  font-size: 1.25rem;
  font-weight: 750;
  color: var(--color-moss);
  margin: 0 0 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--color-border-light);
}

.kyo-cart-summary-rows {
  margin-bottom: 1.25rem;
}

.kyo-cart-tax-note {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: right;
  margin-top: 0.35rem;
  margin-bottom: 1.25rem;
}

.kyo-shipping-val {
  color: #2E7D32;
  font-weight: 750;
}

/* COD Notice Card */
.kyo-cod-notice-card {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: rgba(74, 107, 98, 0.06);
  border: 1px solid rgba(74, 107, 98, 0.16);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 0.85rem;
}

.kyo-cod-notice-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.kyo-cod-notice-content strong {
  font-size: 0.84rem;
  color: var(--color-moss);
  display: block;
}

.kyo-cod-notice-content p {
  font-size: 0.77rem;
  color: var(--color-text-secondary);
  margin: 0.2rem 0 0;
  line-height: 1.35;
}

/* Discreet Shipping Badge */
.kyo-cart-discreet-ship-badge {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: #FAF8F5;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
  font-size: 0.78rem;
  color: var(--color-moss);
}

.kyo-cart-discreet-ship-badge strong {
  display: block;
  font-size: 0.82rem;
}

.kyo-cart-discreet-ship-badge p {
  margin: 0.15rem 0 0;
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

.kyo-cart-checkout-btn {
  padding: 0.85rem 1.25rem;
  font-size: 0.98rem;
  font-weight: 750;
  min-height: 48px;
}

/* ==========================================================================
   MOBILE UX TRANSFORMATION: SLIDERS, SEGMENTED TOGGLES & ACCORDIONS
   Dramatically reduces page scroll length on smartphones (320px - 768px)
   ========================================================================== */

/* 1. Mobile Horizontal Snap Sliders */
@media (max-width: 768px) {
  .kyo-mobile-slider {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 1rem !important;
    padding: 0.5rem 1rem 1.25rem !important;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
    scrollbar-width: none !important;
    position: relative;
    box-sizing: border-box !important;
  }

  .kyo-mobile-slider::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
  }

  .kyo-mobile-slider > * {
    flex: 0 0 84% !important;
    max-width: 84% !important;
    min-width: 84% !important;
    scroll-snap-align: center !important;
    scroll-snap-stop: always !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  /* Footer Pillars Slider on Mobile */
  .kyo-footer-pillars.kyo-mobile-slider > * {
    flex: 0 0 78% !important;
    max-width: 78% !important;
    min-width: 78% !important;
  }

  /* Slider Navigation Dots & Swipe Indicator */
  .kyo-slider-dots-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin: 0.75rem 0 1.5rem;
    user-select: none;
  }

  .kyo-slider-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
  }

  .kyo-slider-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-border);
    transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
    border: none;
    padding: 0;
  }

  .kyo-slider-dot.active {
    width: 24px;
    border-radius: 10px;
    background-color: var(--color-moss);
  }

  .kyo-slider-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.74rem;
    font-weight: 650;
    color: var(--color-sage);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.85;
  }
}

@media (min-width: 769px) {
  .kyo-slider-dots-wrap,
  .kyo-segmented-control.kyo-mobile-only {
    display: none !important;
  }
}

/* 2. Interactive Segmented Toggles (iOS / macOS Style) */
.kyo-segmented-control {
  display: flex;
  background: rgba(74, 107, 98, 0.08);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 0.25rem;
  margin-bottom: 1.25rem;
  position: relative;
  gap: 0.25rem;
  max-width: 480px;
  margin-left: auto;
  margin-right: auto;
}

.kyo-segmented-btn {
  flex: 1;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  padding: 0.55rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: all 0.25s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
  white-space: nowrap;
}

.kyo-segmented-btn.active {
  background: #FFFFFF;
  color: var(--color-moss);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.kyo-segmented-btn:hover:not(.active) {
  color: var(--color-moss);
}

/* Mobile Segmented Card View Toggle */
@media (max-width: 768px) {
  .kyo-comparison-grid.kyo-has-toggle > .kyo-comparison-col {
    display: none;
  }
  .kyo-comparison-grid.kyo-has-toggle > .kyo-comparison-col.active {
    display: block !important;
    animation: kyoFadeSlideUp 0.35s ease;
  }

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

/* 3. Mobile Footer Collapsible Accordions */
@media (max-width: 768px) {
  .kyo-footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
  }

  .kyo-footer-col {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radius-md);
    padding: 0.85rem 1.15rem !important;
    overflow: hidden;
    transition: background-color 0.2s ease;
  }

  .kyo-footer-col h4 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    margin: 0 !important;
    font-size: 0.96rem !important;
    color: #FFFFFF !important;
    user-select: none;
  }

  .kyo-footer-col h4::after {
    content: '+';
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--color-sand);
    transition: transform 0.3s ease;
    line-height: 1;
  }

  .kyo-footer-col.is-open h4::after {
    content: '−';
    transform: rotate(180deg);
  }

  .kyo-footer-col .kyo-footer-links,
  .kyo-footer-col .kyo-footer-contact-card,
  .kyo-footer-col p,
  .kyo-footer-col .kyo-footer-badges-wrap {
    display: none;
    margin-top: 0.85rem;
    animation: kyoFadeSlideUp 0.3s ease;
  }

  .kyo-footer-col.is-open .kyo-footer-links,
  .kyo-footer-col.is-open .kyo-footer-contact-card,
  .kyo-footer-col.is-open p,
  .kyo-footer-col.is-open .kyo-footer-badges-wrap {
    display: block;
  }

  .kyo-footer-col.is-open .kyo-footer-links {
    display: flex;
    flex-direction: column;
  }
}

/* 4. Mobile 2-Column Product Catalog */
@media (max-width: 640px) {
  .kyo-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    margin: 1.25rem 0 !important;
  }

  .kyo-product-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-md);
  }

  .kyo-product-card .kyo-product-thumb {
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .kyo-product-card .kyo-product-body {
    padding: 0.65rem;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .kyo-product-card .kyo-product-sku {
    font-size: 0.65rem;
  }

  .kyo-product-card .kyo-product-title {
    font-size: 0.85rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0.2rem 0;
  }

  .kyo-product-card .kyo-product-desc {
    display: none;
  }

  .kyo-product-card .kyo-product-card-options-row {
    margin: 0.2rem 0 0.4rem;
    gap: 0.2rem;
  }

  .kyo-product-card .kyo-card-variant-chip,
  .kyo-product-card .kyo-card-discount-chip {
    font-size: 0.65rem;
    padding: 0.12rem 0.35rem;
  }

  .kyo-product-card .kyo-product-footer {
    margin-top: auto;
    padding-top: 0.35rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
  }

  .kyo-product-card .kyo-product-price {
    font-size: 1.15rem;
  }

  .kyo-product-card .kyo-btn {
    font-size: 0.78rem;
    padding: 0.4rem 0.5rem;
    width: 100%;
    text-align: center;
  }
}

/* 5. Mobile PDP Collapsible Accordion Cards */
@media (max-width: 768px) {
  .kyo-pdp-details-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
  }

  .kyo-pdp-card {
    border-radius: var(--radius-md);
    padding: 1rem 1.15rem;
  }

  .kyo-pdp-card-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none;
  }

  .kyo-pdp-card-header::after {
    content: '+';
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--color-sage);
    transition: transform 0.25s ease;
  }

  .kyo-pdp-card.is-open .kyo-pdp-card-header::after {
    content: '−';
    transform: rotate(180deg);
  }

  .kyo-pdp-card:not(.is-open) .kyo-pdp-desc-text,
  .kyo-pdp-card:not(.is-open) .kyo-pdp-specs-table,
  .kyo-pdp-card:not(.is-open) .kyo-pdp-usage-text,
  .kyo-pdp-card:not(.is-open) .kyo-pdp-discreet-text {
    display: none;
  }
}

/* ==========================================================================
   MASTER PHONE-MODE & FLUID TYPOGRAPHY ADAPTATION (<640px & <768px)
   Perfect content filling, proportional typography & 100% User-Friendly UX
   ========================================================================== */

@media (max-width: 640px) {
  /* 1. Global Viewport & Container Filling */
  html, body {
    overflow-x: clip !important;
    max-width: 100vw !important;
    width: 100% !important;
  }

  .kyo-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    box-sizing: border-box !important;
  }

  /* 2. Compact Section Vertical Spacing (Eliminates dead vertical voids) */
  section,
  .kyo-section,
  .kyo-hero {
    padding-top: 1.85rem !important;
    padding-bottom: 1.85rem !important;
  }

  /* 3. Proportional Phone Typography Scaling */
  h1,
  .kyo-hero-title,
  .kyo-pdp-title {
    font-size: clamp(1.38rem, 5.2vw, 1.75rem) !important;
    line-height: 1.22 !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 0.65rem !important;
    word-break: break-word !important;
  }

  h2,
  .kyo-pdp-section-title {
    font-size: clamp(1.18rem, 4.2vw, 1.42rem) !important;
    line-height: 1.26 !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 0.55rem !important;
    word-break: break-word !important;
  }

  h3,
  .kyo-product-title,
  .kyo-bento-card h3 {
    font-size: clamp(1.02rem, 3.4vw, 1.16rem) !important;
    line-height: 1.32 !important;
    margin-bottom: 0.4rem !important;
  }

  h4 {
    font-size: clamp(0.92rem, 2.8vw, 1.02rem) !important;
    line-height: 1.35 !important;
  }

  p,
  .kyo-hero-subtitle {
    font-size: clamp(0.85rem, 2.5vw, 0.92rem) !important;
    line-height: 1.55 !important;
    color: var(--color-text-secondary) !important;
    margin-bottom: 0.85rem !important;
  }

  /* Compact Eyebrows & Badges */
  .kyo-eyebrow {
    font-size: 0.68rem !important;
    font-weight: 750 !important;
    padding: 0.2rem 0.55rem !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 0.5rem !important;
    border-radius: var(--radius-full) !important;
    white-space: normal !important;
    text-align: left !important;
    line-height: 1.3 !important;
    max-width: 100% !important;
  }

  .kyo-hero-badge {
    font-size: 0.70rem !important;
    padding: 0.25rem 0.65rem !important;
    letter-spacing: 0.02em !important;
    line-height: 1.35 !important;
    margin-bottom: 0.65rem !important;
    display: inline-flex !important;
    max-width: 100% !important;
  }

  /* 4. Bento & Content Cards Filling */
  .kyo-bento-card,
  .kyo-card,
  .kyo-comparison-card,
  .kyo-pdp-card,
  .kyo-cart-summary-card {
    padding: 1.15rem 1.15rem !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
  }

  /* 5. Hero Section Phone Layout */
  .kyo-hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    width: 100% !important;
    margin-bottom: 1.25rem !important;
  }

  .kyo-hero-actions .kyo-btn {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
    min-height: 48px !important;
    font-size: 0.92rem !important;
  }

  .kyo-hero-usp-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
    margin-top: 0.85rem !important;
    padding-top: 0.85rem !important;
    border-top: 1px solid var(--color-border-light) !important;
  }

  .kyo-usp-item {
    font-size: 0.78rem !important;
    color: var(--color-moss) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  .kyo-usp-item svg {
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0 !important;
    color: var(--color-sage) !important;
  }

  .kyo-hero-card-preview {
    margin-top: 1.25rem !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
  }

  /* 6. Showcase Products & Bundles Phone Stack */
  .kyo-showcase-split,
  .kyo-showcase-bundle-split {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    height: auto !important;
    min-height: 0 !important;
  }

  .kyo-showcase-split > div:first-child,
  .kyo-showcase-bundle-split > div:first-child {
    order: 2 !important;
    min-height: auto !important;
    height: auto !important;
    width: 100% !important;
  }

  .kyo-showcase-img,
  .kyo-showcase-bundle-img {
    order: 1 !important;
    width: 100% !important;
    height: 190px !important;
    max-height: 200px !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    border-radius: var(--radius-md) !important;
    display: block !important;
    margin: 0 !important;
  }

  .kyo-btn-row {
    display: flex !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .kyo-btn-row .kyo-btn {
    flex: 1 !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 0.55rem 0.75rem !important;
    font-size: 0.85rem !important;
  }

  .kyo-showcase-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    gap: 0.65rem !important;
    margin-top: 0.75rem !important;
    padding-top: 0.65rem !important;
    border-top: 1px solid var(--color-border-light) !important;
  }

  .kyo-showcase-btns {
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
  }

  /* 7. Catalog Page Filters & Sorting */
  .kyo-catalog-filter-bar {
    display: flex !important;
    overflow-x: auto !important;
    flex-wrap: nowrap !important;
    gap: 0.4rem !important;
    padding-bottom: 0.5rem !important;
    scrollbar-width: none !important;
  }

  .kyo-catalog-filter-bar .kyo-btn {
    flex-shrink: 0 !important;
    font-size: 0.78rem !important;
    padding: 0.4rem 0.75rem !important;
    min-height: 38px !important;
  }

  /* 8. Diagnostic Quiz & Calculators */
  .kyo-quiz-card {
    padding: 1.25rem 1rem !important;
  }

  .kyo-quiz-option-btn,
  .kyo-expert-opt-card {
    min-height: 48px !important;
    padding: 0.75rem 0.85rem !important;
    font-size: 0.86rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
  }

  .kyo-quiz-telemetry-pill {
    font-size: 0.72rem !important;
    padding: 0.2rem 0.5rem !important;
  }

  /* 9. Action Bars on Cart & Wishlist */
  #kyoCartActionBar,
  #kyoWishlistHeaderBar {
    padding: 0.75rem 0.95rem !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.65rem !important;
  }

  #kyoCartActionBar .kyo-btn,
  #kyoWishlistHeaderBar .kyo-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  /* 10. Table & Pre/Code Overflow Guard */
  table,
  pre,
  code {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* ==========================================================================
   SEGMENTED SWITCHERS (NO-SLIDER) & HERO OVERLAP RESOLUTION
   ========================================================================== */

/* 1. Hero Hotspot & Inspector Mobile Optimization (User-Friendly & No-Overlap) */
.kyo-hotspot {
  z-index: 20 !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

.kyo-hotspot.is-active {
  z-index: 25 !important;
}

.kyo-hero-card-footer {
  background: #FFFFFF;
  padding: 0.85rem 1.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-border);
  position: relative;
  z-index: 20;
}

.kyo-hero-card-footer-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

.kyo-hero-card-footer-price {
  font-family: var(--font-mono);
  font-weight: 800;
  font-size: 1.25rem;
  color: var(--color-moss);
  white-space: nowrap !important;
  line-height: 1;
}

.kyo-hero-card-footer .kyo-btn {
  width: auto !important;
  justify-content: center !important;
  min-height: 38px !important;
  padding: 0 1.15rem !important;
}

@media (max-width: 768px) {
  .kyo-hero-card-footer {
    flex-direction: column !important;
    gap: 0.65rem !important;
  }

  .kyo-hero-card-footer-meta {
    flex-direction: row !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .kyo-hero-card-footer .kyo-btn {
    width: 100% !important;
    min-height: 42px !important;
  }
  /* 3-Column Equal Grid Toolbar: No cutoffs, No horizontal scroll */
  .kyo-hero-zone-bar {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.3rem !important;
    padding: 0.45rem 0.5rem !important;
    overflow: visible !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .kyo-hero-zone-btn {
    width: 100% !important;
    padding: 0.4rem 0.2rem !important;
    font-size: 0.70rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    white-space: nowrap !important;
    border-radius: var(--radius-full) !important;
    box-sizing: border-box !important;
    text-align: center !important;
    flex-shrink: 0 !important;
  }

  /* Badge: Ensure µm doesn't turn into MM */
  .kyo-product-badge {
    text-transform: none !important;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    padding: 0.2rem 0.55rem !important;
    top: 0.55rem !important;
    left: 0.55rem !important;
  }

  /* Image Container: Clean, fully visible product photo */
  .kyo-hotspot-container.kyo-hero-card-media {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    max-height: none !important;
    overflow: hidden !important;
    background: #EDE8DE !important;
  }

  .kyo-hotspot-container.kyo-hero-card-media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* Miniature Floating Glass HUD Window on the Product Photo (Mobile) */
  .kyo-hero-inspector {
    position: absolute !important;
    bottom: 8px !important;
    left: 8px !important;
    right: 8px !important;
    transform: translateY(6px) !important;
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(0, 245, 160, 0.35) !important;
    background: rgba(10, 20, 15, 0.90) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    padding: 0.55rem 0.75rem !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4) !important;
    display: block !important;
    opacity: 0 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
    width: auto !important;
    z-index: 30 !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .kyo-hero-inspector.is-open {
    transform: translateY(0) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .kyo-inspector-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin-bottom: 0.35rem !important;
    width: 100% !important;
  }

  .kyo-inspector-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    overflow: hidden !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .kyo-spec-chip {
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.03em !important;
    padding: 0.15rem 0.35rem !important;
    border-radius: 4px !important;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
  }

  #kyoInspectorTitle {
    font-size: 0.76rem !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .kyo-inspector-close-btn {
    width: 22px !important;
    height: 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.12) !important;
    border: none !important;
    color: #FFFFFF !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  .kyo-inspector-telemetry-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.3rem !important;
    margin-bottom: 0.35rem !important;
    width: 100% !important;
  }

  .kyo-inspector-chip {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 4px !important;
    padding: 0.2rem 0.25rem !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.1rem !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .kyo-inspector-chip span:first-child {
    font-size: 0.58rem !important;
    color: #A9BDB4 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  .kyo-inspector-chip-val {
    font-weight: 800 !important;
    font-size: 0.70rem !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
    max-width: 100% !important;
  }

  .kyo-inspector-action-row {
    display: block !important;
    margin: 0 !important;
    padding-top: 0.25rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    width: 100% !important;
  }

  .kyo-inspector-desc-short {
    display: block !important;
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    color: #DCE7E1 !important;
    white-space: normal !important;
    overflow: visible !important;
    margin: 0 !important;
  }

  /* Hide redundant duplicate button inside inspector on mobile */
  #kyoHeroInspectorCta {
    display: none !important;
  }

  /* Hero Card Footer */
  .kyo-hero-card-footer {
    background: #FFFFFF !important;
    padding: 0.75rem 0.85rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    border-top: 1px solid var(--color-border) !important;
  }

  .kyo-hero-card-footer-meta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  .kyo-hero-card-footer-price {
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    color: var(--color-moss) !important;
  }

  .kyo-hero-card-footer .kyo-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 42px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
  }
}

/* 2. Universal Segmented Switcher for Phone Mode (No cutoffs, No peeking) */
@media (max-width: 768px) {
  .kyo-mobile-switcher > * {
    display: none !important;
  }

  .kyo-mobile-switcher > *.is-active {
    display: block !important;
    width: 100% !important;
    grid-column: 1 / -1 !important;
    animation: kyoFadeInUp 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

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

  /* Segmented control bar tuning - Multi-row responsive grid */
  .kyo-segmented-control {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.45rem !important;
    background: rgba(74, 107, 98, 0.08) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 0.45rem !important;
    margin: 1.25rem auto 1.15rem !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  .kyo-segmented-control--count-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .kyo-segmented-control--count-3 {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .kyo-segmented-control--count-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .kyo-segmented-control--count-5,
  .kyo-segmented-control--count-6 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  @media (min-width: 460px) and (max-width: 768px) {
    .kyo-segmented-control--count-6 {
      grid-template-columns: repeat(3, 1fr) !important;
    }
  }

  .kyo-segmented-btn {
    width: 100% !important;
    padding: 0.6rem 0.5rem !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: normal !important;
    text-align: center !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-text-secondary) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    transition: all 0.2s ease !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
  }

  .kyo-segmented-btn:hover {
    color: var(--color-moss) !important;
    background: rgba(255, 255, 255, 0.35) !important;
  }

  .kyo-segmented-btn.active {
    background: #FFFFFF !important;
    color: var(--color-moss) !important;
    font-weight: 700 !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  }
}

@media (min-width: 769px) {
  .kyo-mobile-switcher {
    display: grid !important;
  }
  .kyo-mobile-switcher > * {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0 !important;
  }
  .kyo-mobile-switcher > * > h2,
  .kyo-mobile-switcher > * > h3,
  .kyo-mobile-switcher > * > p {
    width: 100% !important;
  }
  .kyo-mobile-switcher > * > .kyo-showcase-split,
  .kyo-mobile-switcher > * > .kyo-showcase-bundle-split {
    width: 100% !important;
    height: 100% !important;
  }
  .kyo-mobile-switcher > * > .kyo-detail-back-link,
  .kyo-mobile-switcher > * > .kyo-btn {
    margin-top: auto !important;
  }
}

/* ==========================================================================
   SENIOR DEVELOPER MOBILE PERFECTION (<640px)
   Zero overflow, full screen utilization, proportional typography, compact rhythm
   ========================================================================== */

@media (max-width: 640px) {
  /* 1. Prevent any element from exceeding viewport width */
  * {
    box-sizing: border-box !important;
  }

  /* 2. Compact, cohesive Section Paddings */
  section,
  .kyo-section {
    padding-top: 1.65rem !important;
    padding-bottom: 1.65rem !important;
  }

  /* 3. Hero Tuning */
  .kyo-hero {
    padding-top: 1.25rem !important;
    padding-bottom: 1.65rem !important;
  }

  .kyo-hero-title {
    font-size: clamp(1.32rem, 5vw, 1.62rem) !important;
    line-height: 1.24 !important;
    letter-spacing: -0.015em !important;
    margin-bottom: 0.65rem !important;
  }

  .kyo-hero-subtitle {
    font-size: 0.88rem !important;
    line-height: 1.52 !important;
    margin-bottom: 1rem !important;
  }

  .kyo-hero-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
    width: 100% !important;
    margin-bottom: 0.85rem !important;
  }

  .kyo-hero-actions .kyo-btn {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 0.90rem !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .kyo-hero-usp-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    margin-top: 0.65rem !important;
    padding-top: 0.65rem !important;
    border-top: 1px solid var(--color-border-light) !important;
  }

  .kyo-usp-item {
    font-size: 0.76rem !important;
    gap: 0.4rem !important;
    color: var(--color-moss) !important;
    font-weight: 600 !important;
  }

  .kyo-usp-item svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0 !important;
    color: var(--color-sage) !important;
  }

  /* Hero Hotspot Card & Inspector */
  .kyo-hero-card-preview {
    margin-top: 1.15rem !important;
    border-radius: var(--radius-md) !important;
    overflow: hidden !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06) !important;
  }

  .kyo-hero-card-media {
    height: auto !important;
    max-height: 380px !important;
    aspect-ratio: 1 / 1 !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .kyo-hero-card-media img {
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }

  /* 4. Comparison Section (Before / After) */
  .kyo-comparison-card {
    padding: 1.15rem 1rem !important;
  }

  .kyo-comparison-header h2 {
    font-size: 1.25rem !important;
    line-height: 1.28 !important;
  }

  .kyo-comparison-header p {
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
  }

  .kyo-comparison-list {
    margin-top: 0.65rem !important;
  }

  .kyo-comparison-list li {
    padding: 0.6rem 0 !important;
    gap: 0.6rem !important;
    font-size: 0.84rem !important;
    line-height: 1.5 !important;
  }

  /* 5. 3 Pillars, 4 Layers & Bestsellers Switcher Cards */
  .kyo-mobile-switcher > .kyo-bento-card {
    padding: 1.15rem !important;
    border-radius: var(--radius-md) !important;
  }

  .kyo-mobile-switcher > .kyo-bento-card h3 {
    font-size: 1.12rem !important;
    margin: 0.3rem 0 0.5rem !important;
  }

  .kyo-mobile-switcher > .kyo-bento-card p {
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
  }

  /* 6. Sleep Calculator Mobile Layout */
  .kyo-calc-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.25rem !important;
  }

  .kyo-calc-options-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
  }

  .kyo-calc-btn {
    flex: 1 1 calc(50% - 0.4rem) !important;
    padding: 0.45rem 0.55rem !important;
    font-size: 0.76rem !important;
    min-height: 38px !important;
    text-align: center !important;
  }

  .kyo-calc-result-box {
    padding: 1.15rem !important;
  }

  .kyo-calc-gain-metric {
    font-size: 1.65rem !important;
  }

  .kyo-calc-telemetry-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.35rem !important;
  }

  .kyo-calc-telemetry-chip {
    padding: 0.35rem 0.4rem !important;
  }

  .kyo-calc-telemetry-val {
    font-size: 0.82rem !important;
  }

  .kyo-calc-telemetry-lbl {
    font-size: 0.65rem !important;
  }

  .kyo-calc-solutions-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  /* 7. Diagnostic Quiz Mobile Layout - 2 Elements per Row */
  .kyo-quiz-box {
    padding: 1.25rem 0.95rem !important;
    border-radius: var(--radius-xl) !important;
  }

  .kyo-quiz-options {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.55rem !important;
    margin: 1rem 0 !important;
  }

  .kyo-quiz-option {
    padding: 0.8rem 0.7rem !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid var(--color-border) !important;
    background: #FFFFFF !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: all var(--transition-fast) !important;
  }

  .kyo-quiz-option:nth-child(3):last-child {
    grid-column: 1 / -1 !important;
  }

  .kyo-quiz-option h4 {
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    margin: 0 0 0.3rem !important;
    line-height: 1.25 !important;
    color: var(--color-moss) !important;
  }

  .kyo-quiz-option p {
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
    color: var(--color-text-secondary) !important;
    margin: 0 !important;
  }

  .kyo-quiz-option.selected {
    border-color: var(--color-sage) !important;
    background: var(--color-sage-ultra-light) !important;
    box-shadow: 0 4px 12px rgba(74, 107, 98, 0.15) !important;
  }

  /* 8. FAQ Accordions on Mobile */
  .kyo-faq-accordion {
    border-radius: var(--radius-md) !important;
    margin-bottom: 0.5rem !important;
  }

  .kyo-faq-summary {
    padding: 0.85rem 1rem !important;
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
  }

  .kyo-faq-tag {
    font-size: 0.65rem !important;
    padding: 0.15rem 0.45rem !important;
  }

  .kyo-faq-content {
    padding: 0.85rem 1rem 1rem !important;
    font-size: 0.84rem !important;
    line-height: 1.55 !important;
  }

  /* 9. Expert Doctor Endorsement Card */
  .kyo-expert-portrait-frame {
    max-width: 140px !important;
    aspect-ratio: 1 / 1 !important;
    margin-bottom: 0.75rem !important;
  }

  /* 10. Footer Trust Pillars 2x2 Badge Grid */
  .kyo-footer-pillars {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.55rem !important;
    padding-bottom: 0.85rem !important;
    margin-bottom: 1rem !important;
  }

  .kyo-footer-pillar-card {
    padding: 0.65rem !important;
    border-radius: var(--radius-sm) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    align-items: center !important;
  }

  .kyo-footer-pillar-icon {
    font-size: 1.2rem !important;
    flex-shrink: 0 !important;
  }

  .kyo-footer-pillar-text strong {
    font-size: 0.74rem !important;
    line-height: 1.25 !important;
    display: block !important;
  }

  .kyo-footer-pillar-text p {
    display: none !important;
  }
}


/* ========================================================
   EXPERT COMPACT ADAPTATION FOR WIDGETS ON MOBILE (PHONE UX)
   ======================================================== */
@media (max-width: 768px) {
  /* Global Widget Outer Box Compression */
  .kyo-calculator-widget,
  .kyo-pressure-widget,
  .kyo-layer-widget,
  .kyo-quiz-box {
    margin: 0 !important;
    padding: 1.15rem 0.9rem !important;
    border-radius: var(--radius-lg) !important;
  }

  /* --- 1. SCHLAFRUHE-KALKULATOR MOBILE COMPACT & ZERO COLLISION --- */
  .kyo-calc-layout {
    gap: 1.15rem !important;
  }

  .kyo-calc-lead,
  .kyo-calculator-widget p {
    color: #DCE7E1 !important;
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.85rem !important;
  }

  .kyo-calc-step-title {
    font-size: 0.76rem !important;
    letter-spacing: 0.05em !important;
    margin-top: 0.65rem !important;
    margin-bottom: 0.35rem !important;
  }

  .kyo-calc-options-row {
    display: grid !important;
    gap: 0.4rem !important;
    margin-bottom: 0.75rem !important;
    width: 100% !important;
  }

  .kyo-calc-options-grid-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .kyo-calc-options-stack {
    grid-template-columns: 1fr !important;
  }

  .kyo-calc-btn {
    width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    text-align: center !important;
    padding: 0.45rem 0.65rem !important;
    font-size: 0.82rem !important;
    min-height: 38px !important;
    line-height: 1.25 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-md) !important;
    flex: none !important;
  }

  .kyo-calc-result-box {
    padding: 1rem 0.85rem !important;
    margin-top: 0.75rem !important;
    border-radius: var(--radius-md) !important;
  }

  .kyo-calc-gain-metric {
    font-size: 1.7rem !important;
    margin: 0.3rem 0 0.15rem !important;
  }

  .kyo-calc-telemetry-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.35rem !important;
    margin: 0.6rem 0 0.75rem !important;
  }

  .kyo-calc-telemetry-chip {
    padding: 0.35rem 0.25rem !important;
  }

  .kyo-calc-telemetry-val {
    font-size: 0.85rem !important;
  }

  .kyo-calc-telemetry-lbl {
    font-size: 0.65rem !important;
  }

  .kyo-calc-schedule-list {
    gap: 0.4rem !important;
    margin-top: 0.5rem !important;
  }

  .kyo-calc-schedule-list li {
    grid-template-columns: 76px 1fr !important;
    padding: 0.35rem 0.55rem !important;
    gap: 0.4rem !important;
  }

  .kyo-calc-schedule-time {
    font-size: 0.75rem !important;
  }

  .kyo-chrono-text {
    font-size: 0.75rem !important;
  }

  .kyo-calc-bottom-shelf {
    margin-top: 1rem !important;
    padding-top: 0.85rem !important;
  }

  .kyo-calc-solutions-grid {
    grid-template-columns: 1fr !important;
    gap: 0.65rem !important;
    margin-top: 0.65rem !important;
  }

  .kyo-calc-solution-card {
    padding: 0.75rem 0.85rem !important;
  }

  /* --- 2. DRUCKSENSORMESSUNG (PRESSURE MAP) MOBILE COMPACT --- */
  .kyo-pressure-lead {
    color: #DCE7E1 !important;
    font-size: 0.84rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.85rem !important;
  }

  .kyo-pressure-controls {
    display: flex !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 auto 0.85rem !important;
    padding: 0.25rem !important;
    gap: 0.35rem !important;
    box-sizing: border-box !important;
  }

  .kyo-pressure-tab {
    flex: 1 1 50% !important;
    padding: 0.45rem 0.35rem !important;
    font-size: 0.78rem !important;
    text-align: center !important;
    white-space: nowrap !important;
  }

  .kyo-pressure-display {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .kyo-pressure-visual {
    padding: 0.4rem !important;
    border-radius: var(--radius-md) !important;
    background-color: #07130E !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .kyo-pressure-visual img {
    aspect-ratio: 16 / 10 !important;
    max-height: 240px !important;
    border-radius: 6px !important;
    object-fit: contain !important;
    object-position: center center !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .kyo-pressure-info h3 {
    font-size: 1.05rem !important;
    margin-top: 0.65rem !important;
    margin-bottom: 0.35rem !important;
  }

  .kyo-pressure-info p {
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    color: #D6E4DC !important;
    margin-bottom: 0.65rem !important;
  }

  .kyo-telemetry-metrics-bar {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    margin-top: 0.65rem !important;
  }

  .kyo-metric-tile {
    padding: 0.5rem 0.4rem !important;
  }

  .kyo-metric-value {
    font-size: 1.15rem !important;
  }

  .kyo-metric-label {
    font-size: 0.7rem !important;
  }

  /* --- 3. 4-SCHICHTEN TEXTILLABOR MOBILE COMPACT (2 IN A ROW) --- */
  .kyo-layer-layout {
    grid-template-columns: 1fr !important;
  }

  .kyo-layer-controls {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    padding: 0.65rem 0.5rem !important;
  }

  .kyo-layer-tab {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    padding: 0.65rem 0.65rem 0.6rem !important;
    gap: 0.2rem !important;
    min-height: 86px !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-md) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
    text-align: left !important;
  }

  .kyo-layer-tab-num {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    border-radius: 50% !important;
    font-size: 0.76rem !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    margin: 0 0 0.35rem 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
  }

  .kyo-layer-tab.active .kyo-layer-tab-num {
    background: var(--color-terracotta) !important;
    color: #FFFFFF !important;
  }

  .kyo-layer-tab:not(.active) .kyo-layer-tab-num {
    background: var(--color-sand) !important;
    color: var(--color-moss) !important;
  }

  .kyo-layer-tab > div {
    min-width: 0 !important;
    width: 100% !important;
  }

  .kyo-layer-tab-title {
    font-size: 0.76rem !important;
    font-weight: 750 !important;
    line-height: 1.22 !important;
    display: block !important;
    margin-bottom: 0.2rem !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
    color: inherit !important;
  }

  .kyo-layer-tab-prefix {
    display: none !important;
  }

  .kyo-layer-desc-full {
    display: none !important;
  }

  .kyo-layer-desc-short {
    display: block !important;
    font-size: 0.67rem !important;
    line-height: 1.25 !important;
    color: var(--color-text-secondary) !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
  }

  .kyo-layer-tab.active .kyo-layer-desc-short {
    color: rgba(255, 255, 255, 0.88) !important;
  }

  .kyo-layer-display {
    padding: 1rem 0.85rem !important;
  }
}


/* ========================================================
   USER-FRIENDLY & SPACIOUS MOBILE STYLES FOR WIDGETS
   ======================================================== */
.kyo-calc-btn-icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
  display: inline-block;
  margin-right: 0.5rem;
}

.kyo-calc-options-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.65rem;
  margin-bottom: 1.15rem;
}

.kyo-calc-options-stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 1.15rem;
}

@media (max-width: 768px) {
  /* Section Spacing */
  .kyo-pressure-section,
  .kyo-calc-section {
    padding: 1.25rem 0 !important;
  }

  /* ----------------- 1. PRESSURE MAP WIDGET (PHOTO 3 ADAPTATION) ----------------- */
  .kyo-pressure-widget {
    margin: 0 !important;
    padding: 1.1rem 0.85rem !important;
    border-radius: var(--radius-lg) !important;
  }

  .kyo-pressure-header {
    margin: 0 auto 0.95rem !important;
    text-align: center !important;
  }

  .kyo-pressure-h2 {
    font-size: clamp(1.12rem, 3.8vw, 1.35rem) !important;
    margin: 0.35rem 0 0.4rem !important;
    line-height: 1.25 !important;
  }

  .kyo-pressure-lead {
    color: #DCE7E1 !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    margin: 0 auto 0.75rem !important;
    display: block !important;
    max-width: 580px !important;
  }

  .kyo-pressure-controls {
    display: flex !important;
    width: 100% !important;
    max-width: 320px !important;
    margin: 0 auto 0.85rem !important;
    padding: 0.25rem !important;
    gap: 0.35rem !important;
    background: var(--color-moss-deep) !important;
    border-radius: var(--radius-full) !important;
    box-sizing: border-box !important;
  }

  .kyo-pressure-tab {
    flex: 1 1 50% !important;
    padding: 0.45rem 0.55rem !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-radius: var(--radius-full) !important;
    border: none !important;
    color: #A9B8B1 !important;
    background: transparent !important;
    cursor: pointer !important;
  }

  .kyo-pressure-tab.active {
    background: var(--color-terracotta) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }

  .kyo-pressure-display {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
  }

  .kyo-pressure-visual {
    padding: 0.35rem !important;
    border-radius: var(--radius-md) !important;
    background: #07130E !important;
    overflow: hidden !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .kyo-pressure-visual img {
    width: 100% !important;
    height: auto !important;
    max-height: 230px !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 6px !important;
    display: block !important;
    margin: 0 auto !important;
  }

  .kyo-pressure-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
  }

  #kyoPressureBadge {
    font-size: 0.72rem !important;
    padding: 0.25rem 0.65rem !important;
    margin: 0 !important;
    display: inline-block !important;
    width: fit-content !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    border-radius: 999px !important;
  }

  #kyoPressureTitle {
    font-size: 1.02rem !important;
    margin: 0.2rem 0 0.25rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
  }

  #kyoPressureDesc {
    color: #DCE7E1 !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    margin: 0 0 0.5rem !important;
    display: block !important;
  }

  .kyo-telemetry-metrics-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
    margin-top: 0.25rem !important;
  }

  .kyo-metric-tile {
    padding: 0.45rem 0.65rem !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .kyo-metric-value {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
  }

  .kyo-metric-label {
    font-size: 0.66rem !important;
    line-height: 1.25 !important;
    margin-top: 0.15rem !important;
    color: #A9B8B1 !important;
    font-weight: 600 !important;
  }

  .kyo-pressure-benefit-box {
    display: block !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 0.65rem 0.85rem !important;
    margin-top: 0.55rem !important;
  }

  /* ----------------- 2. SLEEP CALCULATOR (PHOTOS 1 & 2 ADAPTATION) ----------------- */
  .kyo-calculator-widget {
    margin: 0 !important;
    padding: 1.15rem 0.85rem !important;
    border-radius: var(--radius-lg) !important;
  }

  .kyo-calc-h2 {
    font-size: clamp(1.12rem, 3.8vw, 1.35rem) !important;
    margin: 0.3rem 0 0.45rem !important;
    line-height: 1.25 !important;
  }

  .kyo-calc-lead {
    color: #DCE7E1 !important;
    font-size: 0.82rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.85rem !important;
    display: block !important;
  }

  .kyo-calc-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.15rem !important;
  }

  .kyo-calc-step-title {
    font-size: 0.78rem !important;
    letter-spacing: 0.04em !important;
    margin-top: 0.65rem !important;
    margin-bottom: 0.35rem !important;
    color: #A7E4CD !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
  }

  .kyo-calc-options-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.55rem !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
  }

  .kyo-calc-options-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
    margin-bottom: 1rem !important;
    width: 100% !important;
  }

  .kyo-calc-btn {
    width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    padding: 0.65rem 0.85rem !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    min-height: 44px !important;
    line-height: 1.3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-md) !important;
  }

  .kyo-calc-options-stack .kyo-calc-btn {
    justify-content: flex-start !important;
    text-align: left !important;
    padding: 0.65rem 1rem !important;
  }

  #kyoCalcStatusNote > div {
    padding: 0.55rem 0.75rem !important;
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    margin-top: 0.55rem !important;
    border-radius: 6px !important;
  }

  /* Result Box & Metrics (Photo 2 Optimization) */
  .kyo-calc-result-box {
    padding: 0.95rem 0.85rem !important;
    margin-top: 0.35rem !important;
    border-radius: var(--radius-md) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .kyo-calc-gain-metric {
    font-size: clamp(1.4rem, 5.2vw, 1.85rem) !important;
    font-weight: 800 !important;
    color: #4ADE80 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
    margin: 0.15rem 0 !important;
    letter-spacing: -0.02em !important;
  }

  .kyo-calc-telemetry-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.35rem !important;
    margin: 0.55rem 0 0.75rem !important;
  }

  .kyo-calc-telemetry-chip {
    padding: 0.38rem 0.2rem !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    text-align: center !important;
  }

  .kyo-calc-telemetry-val {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: #4ADE80 !important;
    line-height: 1.15 !important;
    display: block !important;
  }

  .kyo-calc-telemetry-lbl {
    font-size: 0.60rem !important;
    font-weight: 600 !important;
    color: #A9B8B1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    line-height: 1.15 !important;
    margin-top: 0.15rem !important;
    display: block !important;
  }

  /* Chrono-Ablauf Schedule (Photo 2 Optimization) */
  .kyo-calc-schedule-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    margin: 0.45rem 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .kyo-calc-schedule-list li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.45rem !important;
    padding: 0.38rem 0.5rem !important;
    border-radius: 6px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .kyo-calc-schedule-time {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #A7E4CD !important;
    background: rgba(167, 228, 205, 0.12) !important;
    padding: 0.15rem 0.35rem !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    line-height: 1.3 !important;
  }

  .kyo-chrono-text {
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
    color: #E2ECE6 !important;
  }

  /* Solutions Shelf & Switcher (Photo 1 Optimization) */
  .kyo-calc-bottom-shelf {
    margin-top: 1rem !important;
    padding-top: 0.85rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  }

  .kyo-calc-shelf-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.35rem !important;
    margin-bottom: 0.5rem !important;
  }

  .kyo-calc-shelf-title-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    flex-wrap: wrap !important;
  }

  .kyo-calc-shelf-count {
    display: none !important;
  }

  /* Segmented Switcher for Solutions (Photo 1) */
  .kyo-calc-solutions-switcher {
    display: flex !important;
    width: 100% !important;
    background: rgba(0, 0, 0, 0.3) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--radius-full) !important;
    padding: 0.2rem !important;
    gap: 0.25rem !important;
    margin: 0.55rem 0 0.85rem !important;
    box-sizing: border-box !important;
  }

  .kyo-calc-sol-tab {
    flex: 1 1 50% !important;
    padding: 0.42rem 0.3rem !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-full) !important;
    border: none !important;
    background: transparent !important;
    color: #A9B8B1 !important;
    cursor: pointer !important;
    text-align: center !important;
    transition: all var(--transition-fast) !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  .kyo-calc-sol-tab.active {
    background: var(--color-moss-deep) !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
  }

  .kyo-calc-sol-tab[data-sol="2"].active {
    background: var(--color-terracotta) !important;
    color: #FFFFFF !important;
  }

  .kyo-calc-solutions-grid {
    display: block !important;
    margin-top: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .kyo-calc-solutions-grid .kyo-calc-solution-card {
    display: none !important;
  }

  .kyo-calc-solutions-grid .kyo-calc-solution-card.active-tab {
    display: flex !important;
    flex-direction: column !important;
    animation: fadeIn 0.25s ease-out;
  }

  .kyo-calc-solution-card {
    padding: 0.85rem 0.85rem !important;
    border-radius: var(--radius-md) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    width: 100% !important;
  }

  .kyo-calc-solution-card--featured {
    background: linear-gradient(135deg, rgba(199, 93, 56, 0.18), rgba(255, 255, 255, 0.06)) !important;
    border-color: rgba(199, 93, 56, 0.5) !important;
    box-shadow: 0 4px 16px rgba(199, 93, 56, 0.15) !important;
  }

  .kyo-calc-solution-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.4rem !important;
    margin-bottom: 0.35rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .kyo-calc-solution-badge {
    font-size: 0.60rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    padding: 0.16rem 0.4rem !important;
    border-radius: 4px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .kyo-calc-solution-tag {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    color: #A9B8B1 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
    text-align: right !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .kyo-calc-solution-tag--featured {
    color: #FF8F6B !important;
  }

  .kyo-calc-solution-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin: 0.2rem 0 0.25rem !important;
    line-height: 1.3 !important;
  }

  .kyo-calc-solution-sub {
    font-size: 0.80rem !important;
    color: #C8D6CF !important;
    line-height: 1.4 !important;
    margin-bottom: 0.65rem !important;
  }

  .kyo-calc-solution-actions {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-top: 0.5rem !important;
    padding-top: 0.55rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .kyo-calc-solution-price {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.05rem !important;
    min-width: 60px !important;
  }

  .kyo-calc-solution-price--featured {
    color: #4ADE80 !important;
  }

  .kyo-calc-price-main {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
  }

  .kyo-calc-price-old {
    font-size: 0.72rem !important;
    text-decoration: line-through !important;
    color: rgba(255, 255, 255, 0.45) !important;
    line-height: 1.1 !important;
    margin-left: 0 !important;
  }

  .kyo-calc-btn-sm {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-sm) !important;
    white-space: nowrap !important;
    min-height: 36px !important;
    flex-shrink: 0 !important;
    max-width: 65% !important;
    text-align: center !important;
  }

  /* Compact & Space-Efficient Brand Heritage Section (Photo 2 Mobile Polish) */
  .kyo-heritage-section {
    padding: 1.5rem 0 !important;
  }

  .kyo-heritage-title {
    font-size: 1.25rem !important;
    margin: 0.35rem 0 0.65rem !important;
    line-height: 1.3 !important;
  }

  .kyo-heritage-lead {
    font-size: 0.86rem !important;
    line-height: 1.5 !important;
    margin-bottom: 0.65rem !important;
  }

  .kyo-heritage-text {
    font-size: 0.84rem !important;
    line-height: 1.48 !important;
    margin-bottom: 0.85rem !important;
  }

  .kyo-heritage-metrics {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.45rem !important;
    margin-top: 0.75rem !important;
  }

  .kyo-heritage-metric-card {
    padding: 0.55rem 0.4rem !important;
    text-align: center !important;
    border-radius: var(--radius-sm) !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border: 1px solid var(--color-border-light) !important;
  }

  .kyo-heritage-metric-val {
    font-size: 1.1rem !important;
    margin-bottom: 0.15rem !important;
    line-height: 1.1 !important;
    font-weight: 800 !important;
    font-family: var(--font-mono) !important;
  }

  .kyo-heritage-metric-lbl {
    font-size: 0.68rem !important;
    line-height: 1.25 !important;
    color: var(--color-text-secondary) !important;
  }

  /* Atelier / Workshop Frame on Mobile (Zero empty beige space below image) */
  .kyo-heritage-section .kyo-editorial-frame {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 10 !important;
    width: 100% !important;
    margin-top: 1.15rem !important;
    margin-bottom: 0 !important;
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    display: block !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    background: transparent !important;
  }

  .kyo-heritage-section .kyo-editorial-frame img {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }
}


/* ========================================================
   COMPACT BEFORE/AFTER COMPARISON & 2-IN-ROW QUIZ RESULTS
   ======================================================== */
@media (max-width: 768px) {
  /* 1. Comparison Section (Before / After) - Spacious, Elegant & User-Friendly */
  .kyo-comparison-card {
    padding: 1.25rem 0.95rem !important;
    margin: 0 !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05) !important;
  }

  .kyo-comparison-header {
    padding: 0.25rem 0.5rem 1.15rem !important;
    text-align: center !important;
    border-bottom: 1px solid var(--color-border-light) !important;
    margin-bottom: 0.5rem !important;
  }

  .kyo-comparison-header h2 {
    font-size: 1.22rem !important;
    margin: 0.35rem 0 0.5rem !important;
    line-height: 1.3 !important;
  }

  .kyo-comparison-header p {
    font-size: 0.86rem !important;
    line-height: 1.55 !important;
    margin-bottom: 0.25rem !important;
  }

  .kyo-comparison-card .kyo-segmented-control {
    margin: 1.25rem auto 1.15rem !important;
  }

  .kyo-comparison-grid.kyo-has-toggle {
    margin-top: 0.35rem !important;
  }

  .kyo-comparison-col {
    padding: 1.15rem 1rem !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--color-border) !important;
    background: #FFFFFF !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    margin-top: 0.5rem !important;
    border-right: 1px solid var(--color-border) !important;
  }

  .kyo-comparison-col--before {
    border-top: 3px solid #EF4444 !important;
    background: #FDFAF9 !important;
  }

  .kyo-comparison-col--after {
    border-top: 3px solid #10B981 !important;
    background: #F9FCFA !important;
  }

  .kyo-comparison-badge {
    font-size: 0.74rem !important;
    padding: 0.35rem 0.75rem !important;
    margin-bottom: 1rem !important;
    gap: 0.45rem !important;
    border-radius: var(--radius-full) !important;
  }

  .kyo-comparison-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .kyo-comparison-list li {
    padding: 0.75rem 0.85rem !important;
    gap: 0.75rem !important;
    background: #FFFFFF !important;
    border: 1px solid var(--color-border-light) !important;
    border-radius: var(--radius-md) !important;
    font-size: 0.84rem !important;
    line-height: 1.5 !important;
    align-items: flex-start !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02) !important;
  }

  .kyo-comparison-list li strong {
    font-size: 0.88rem !important;
    display: block !important;
    margin-bottom: 0.25rem !important;
    color: var(--color-moss) !important;
    line-height: 1.35 !important;
  }

  .kyo-comparison-icon--bad,
  .kyo-comparison-icon--good {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    font-size: 0.8rem !important;
    font-weight: 800 !important;
    margin-top: 1px !important;
    flex-shrink: 0 !important;
  }

  .kyo-comparison-icon--bad {
    background: #FEE2E2 !important;
    color: #DC2626 !important;
  }

  .kyo-comparison-icon--good {
    background: #DCFCE7 !important;
    color: #16A34A !important;
  }

  /* 2. Diagnostic Quiz Results - 2 Elements in 1 Row */
  .kyo-quiz-results {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.55rem !important;
    margin-top: 0.85rem !important;
  }

  .kyo-quiz-results > div:first-child {
    grid-column: 1 / -1 !important;
    padding: 0.85rem 0.95rem !important;
    margin-bottom: 0.45rem !important;
    border-radius: var(--radius-md) !important;
  }

  .kyo-quiz-result-card {
    padding: 0.75rem 0.6rem !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
  }

  .kyo-quiz-result-card img {
    max-width: 85px !important;
    height: 80px !important;
    margin: 0.35rem auto !important;
    border-radius: 6px !important;
  }

  .kyo-quiz-result-card h4 {
    font-size: 0.84rem !important;
    margin: 0.2rem 0 0.3rem !important;
    line-height: 1.25 !important;
    min-height: 2.3em !important;
  }

  .kyo-quiz-result-card p {
    font-size: 0.72rem !important;
    line-height: 1.35 !important;
    margin-bottom: 0.45rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .kyo-result-badge {
    font-size: 0.62rem !important;
    padding: 0.12rem 0.35rem !important;
  }

  .kyo-quiz-result-card .kyo-btn {
    padding: 0.4rem 0.5rem !important;
    font-size: 0.75rem !important;
    width: 100% !important;
    white-space: nowrap !important;
  }

  /* 3. Featured Bundle Card spans 100% in Row 2 as sleek horizontal strip */
  .kyo-quiz-result-card--featured {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 85px 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 0.4rem 0.75rem !important;
    align-items: center !important;
    padding: 0.85rem 0.95rem !important;
    border: 2px solid var(--color-terracotta) !important;
    background: #FFF9F6 !important;
  }

  .kyo-quiz-result-card--featured > div:first-child {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .kyo-quiz-result-card--featured img {
    grid-row: 2 / span 2 !important;
    max-width: 85px !important;
    height: 80px !important;
    margin: 0 !important;
  }

  .kyo-quiz-result-card--featured .kyo-btn {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    margin-top: 0.3rem !important;
  }
}


/* ========================================================
   HIGH-EFFICIENCY MOBILE FOOTER COMPACT OPTIMIZATION
   ======================================================== */
@media (max-width: 768px) {
  /* 1. Footer Container & Padding */
  .kyo-footer {
    padding: 1.5rem 0 1.25rem !important;
  }

  /* 2. Trust Pillars Bar (Compact 2x2 Badge Grid) */
  .kyo-footer-pillars {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.45rem !important;
    padding-bottom: 0.85rem !important;
    margin-bottom: 1.15rem !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .kyo-footer-pillar-card {
    padding: 0.5rem 0.6rem !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-sm) !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
    box-sizing: border-box !important;
  }

  .kyo-footer-pillar-icon {
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
  }

  .kyo-footer-pillar-text strong {
    font-size: 0.76rem !important;
    line-height: 1.2 !important;
    color: #FFFFFF !important;
    display: block !important;
    font-weight: 700 !important;
  }

  /* Hide verbose 3-line paragraph on phone screen */
  .kyo-footer-pillar-text p {
    display: none !important;
  }

  /* 3. Main Footer Grid & Columns */
  .kyo-footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
    margin-bottom: 1rem !important;
  }

  /* Column 1: Centered Brand Card */
  .kyo-footer-col:first-child {
    background: transparent !important;
    border: none !important;
    padding: 0 0 0.5rem !important;
    text-align: center !important;
    align-items: center !important;
  }

  .kyo-footer-col:first-child img {
    margin: 0 auto 0.45rem !important;
    width: 115px !important;
  }

  .kyo-footer-col:first-child p {
    display: block !important;
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
    color: #A9B8B1 !important;
    margin-bottom: 0.45rem !important;
    max-width: 310px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .kyo-footer-col:first-child .kyo-footer-badges-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 0.25rem !important;
    margin-top: 0 !important;
  }

  .kyo-footer-cert-pill {
    font-size: 0.65rem !important;
    padding: 0.12rem 0.4rem !important;
    background: rgba(255, 255, 255, 0.06) !important;
    border-radius: var(--radius-full) !important;
  }

  /* Columns 2-5: Collapsible Accordions */
  .kyo-footer-col:not(:first-child) {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.65rem 0.95rem !important;
    overflow: hidden !important;
    transition: background-color 0.2s ease !important;
  }

  .kyo-footer-col:not(:first-child) h4 {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    border-bottom: none !important;
    font-size: 0.88rem !important;
    color: #FFFFFF !important;
    user-select: none !important;
    font-weight: 700 !important;
  }

  .kyo-footer-col:not(:first-child) h4::after {
    content: '+' !important;
    font-size: 1.15rem !important;
    font-weight: 400 !important;
    color: var(--color-sand) !important;
    line-height: 1 !important;
    transition: transform 0.25s ease !important;
  }

  .kyo-footer-col:not(:first-child).is-open h4::after {
    content: '−' !important;
  }

  .kyo-footer-col:not(:first-child) .kyo-footer-links,
  .kyo-footer-col:not(:first-child) .kyo-footer-contact-card {
    display: none !important;
    margin-top: 0.65rem !important;
    padding-top: 0.55rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .kyo-footer-col:not(:first-child).is-open .kyo-footer-links,
  .kyo-footer-col:not(:first-child).is-open .kyo-footer-contact-card {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    animation: kyoFadeIn 0.25s ease !important;
  }

  .kyo-footer-link {
    font-size: 0.82rem !important;
    padding: 0.25rem 0 !important;
    color: #D6E4DC !important;
  }

  .kyo-footer-contact-card {
    font-size: 0.8rem !important;
    line-height: 1.45 !important;
  }

  /* 4. Payment, Shipping & Security Methods Bar (Cloud format) */
  .kyo-footer-methods-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.35rem !important;
    padding: 0.65rem 0.65rem !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid rgba(255, 255, 255, 0.07) !important;
    border-radius: var(--radius-md) !important;
    margin-bottom: 1rem !important;
  }

  .kyo-method-group {
    display: contents !important;
  }

  .kyo-method-group-title {
    display: none !important;
  }

  .kyo-method-chips {
    display: contents !important;
  }

  .kyo-method-chip {
    padding: 0.25rem 0.5rem !important;
    font-size: 0.72rem !important;
    border-radius: var(--radius-full) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #D6E4DC !important;
    white-space: nowrap !important;
  }

  /* 5. HWG Legal Box & Bottom Row */
  .kyo-footer-bottom {
    padding-top: 0.65rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  }

  .kyo-footer-hwg-box {
    padding: 0.55rem 0.75rem !important;
    font-size: 0.72rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.65rem !important;
    border-radius: var(--radius-sm) !important;
  }

  .kyo-footer-bottom-row {
    flex-direction: column !important;
    gap: 0.35rem !important;
    text-align: center !important;
    font-size: 0.75rem !important;
  }
}


/* ========================================================
   STRUCTURED PAYMENT/SHIPPING CHIPS & COOKIE OVERLAP FIX
   ======================================================== */
@media (max-width: 768px) {
  /* Hide any leftover slider dots in footer */
  .kyo-footer .kyo-slider-dots-wrap {
    display: none !important;
  }

  /* 4. Payment, Shipping & Security Methods Bar - Symmetrical 2-Column Grid */
  .kyo-footer-methods-bar {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.85rem !important;
    padding: 0.95rem 0.85rem !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: 1.15rem !important;
  }

  .kyo-method-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.4rem !important;
  }

  .kyo-method-group-title {
    display: block !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: #A7E4CD !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding-left: 0.15rem !important;
  }

  .kyo-method-chips {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.45rem !important;
  }

  .kyo-method-chip {
    padding: 0.45rem 0.55rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    border-radius: var(--radius-sm) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    color: #E2ECE6 !important;
    white-space: normal !important;
    word-break: normal !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    gap: 0.4rem !important;
    min-height: 38px !important;
    box-sizing: border-box !important;
  }

  /* 3rd chip in 3-item groups spans full width for perfect symmetry */
  .kyo-method-chip:nth-child(3):last-child {
    grid-column: 1 / -1 !important;
  }

  /* Compact Floating Cookie Pill on Mobile (40px circular button, perfectly centered emoji) */
  .kyo-cookie-pill {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    bottom: 1rem !important;
    left: 1rem !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
    z-index: 500 !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .kyo-cookie-pill-text,
  .kyo-cookie-pill-status {
    display: none !important;
  }

  .kyo-cookie-pill-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
  }
}


/* ========================================================
   CALCULATOR BUTTONS 1-ROW OPTIMIZATION ON MOBILE
   ======================================================== */
.kyo-calc-options-row-4,
.kyo-calc-options-row-3 {
  display: flex;
  gap: 0.55rem;
  flex-wrap: wrap;
  margin-bottom: 1.15rem;
}

@media (max-width: 768px) {
  /* 1 Row for Question 1 (4 items) */
  .kyo-calc-options-row-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.35rem !important;
    margin-bottom: 0.75rem !important;
    width: 100% !important;
  }

  /* 1 Row for Question 2 & Question 3 (3 items) */
  .kyo-calc-options-row-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.35rem !important;
    margin-bottom: 0.75rem !important;
    width: 100% !important;
  }

  .kyo-calc-options-row-4 .kyo-calc-btn,
  .kyo-calc-options-row-3 .kyo-calc-btn {
    width: 100% !important;
    padding: 0.4rem 0.2rem !important;
    font-size: 0.70rem !important;
    font-weight: 600 !important;
    line-height: 1.25 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: var(--radius-sm) !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
    -webkit-hyphens: auto !important;
  }

  .kyo-calc-options-row-4 .kyo-calc-btn {
    min-height: 48px !important;
  }

  .kyo-calc-options-row-3 .kyo-calc-btn {
    min-height: 56px !important;
  }

  .kyo-calc-options-row-3 .kyo-calc-btn-icon {
    font-size: 1rem !important;
    margin: 0 0 0.2rem 0 !important;
    line-height: 1 !important;
    display: block !important;
    flex-shrink: 0 !important;
  }

  .kyo-calc-options-row-3 .kyo-calc-btn span:not(.kyo-calc-btn-icon) {
    display: block !important;
    line-height: 1.2 !important;
  }
}

/* ========================================================
   GLOBAL MULTI-PAGE USER-FRIENDLY & SPACE-EFFICIENT ADAPTATIONS
   ======================================================== */

/* Desktop Base Styles for Catalog Filter & Tracking */
.kyo-catalog-filter-bar {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: #FFFFFF;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 2rem;
  box-shadow: var(--shadow-subtle);
}

.kyo-filter-categories-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.kyo-filter-categories-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.kyo-filter-group-heading {
  font-size: 0.80rem;
  font-weight: 700;
  color: var(--color-moss);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kyo-filter-active-count-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.kyo-catalog-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.kyo-catalog-filter-controls-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--color-border-light);
}

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

.kyo-catalog-sort-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-moss);
}

.kyo-catalog-sort-select {
  width: auto;
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.kyo-catalog-controls-right {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.kyo-filter-collapse-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--color-sand);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-moss);
  cursor: pointer;
  min-height: 38px;
  transition: all var(--transition-fast);
}

.kyo-filter-collapse-btn:hover,
.kyo-filter-collapse-btn.active {
  background: rgba(74, 107, 98, 0.12);
  border-color: var(--color-moss);
}

.kyo-filter-reset-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 700;
  background: #FFFFFF;
  border: 1px solid rgba(199, 93, 56, 0.45);
  border-radius: var(--radius-sm);
  color: var(--color-terracotta);
  cursor: pointer;
  min-height: 38px;
  transition: all var(--transition-fast);
}

.kyo-filter-reset-btn:hover {
  background: rgba(199, 93, 56, 0.08);
  border-color: var(--color-terracotta);
}

.kyo-catalog-collapsible-tags {
  display: none;
  padding-top: 0.75rem;
  border-top: 1px dashed var(--color-border-light);
}

.kyo-catalog-collapsible-tags.is-open {
  display: block;
}

.kyo-quick-tags-inner {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.kyo-quick-tags-title {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.kyo-catalog-quick-tags {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.kyo-quick-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--color-sand);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.kyo-quick-tag:hover {
  background: #FFFFFF;
  border-color: var(--color-moss);
  color: var(--color-moss);
}

.kyo-quick-tag.active {
  background: var(--color-moss);
  border-color: var(--color-moss);
  color: #FFFFFF;
  font-weight: 700;
}

.kyo-tracking-input-row {
  display: flex;
  gap: 0.5rem;
}

.kyo-tracking-submit-btn {
  flex-shrink: 0;
}

/* ----------------- CATALOG PAGINATION CONTROLS ----------------- */
.kyo-catalog-pagination-wrap {
  margin: 2.5rem 0 1.5rem;
  display: flex;
  justify-content: center;
  width: 100%;
}

.kyo-pagination-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
}

.kyo-pagination-info {
  font-size: 0.82rem;
  color: var(--color-sage);
  font-weight: 600;
}

.kyo-pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kyo-page-numbers {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.kyo-page-num-btn {
  min-width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  background: #FFFFFF;
  color: var(--color-moss);
  font-weight: 750;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.kyo-page-num-btn:hover {
  border-color: var(--color-terracotta);
  color: var(--color-terracotta);
}

.kyo-page-num-btn.active {
  background: var(--color-terracotta);
  border-color: var(--color-terracotta);
  color: #FFFFFF;
}

.kyo-page-nav-btn {
  min-height: 38px;
  padding: 0.45rem 0.85rem;
  font-size: 0.80rem;
  font-weight: 700;
}

/* ========================================================
   CROSS-SITE MOBILE USER-FRIENDLY SYSTEM (@media max-width: 768px)
   ======================================================== */
@media (max-width: 768px) {
  /* 1. Global Section Spacing & Viewport Ergonomics */
  section:not(.kyo-header):not(.kyo-topbar):not(.kyo-footer):not(.kyo-calc-section) {
    padding-top: 1.5rem !important;
    padding-bottom: 2.5rem !important;
  }

  /* Compact Hero & Section Headings */
  h1:not(.kyo-logo) {
    font-size: clamp(1.4rem, 4.8vw, 1.85rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 0.5rem !important;
  }

  h2 {
    font-size: clamp(1.2rem, 3.8vw, 1.5rem) !important;
    line-height: 1.3 !important;
    margin-bottom: 0.45rem !important;
  }

  h3 {
    font-size: clamp(1.05rem, 3.2vw, 1.22rem) !important;
    line-height: 1.35 !important;
  }

  /* 2. Catalog Page (katalog.html) - Professional Filter Bar, Always-Visible Groups, 1-Click Reset */
  .kyo-catalog-filter-bar {
    padding: 0.75rem 0.85rem !important;
    border-radius: var(--radius-md) !important;
    background: #FFFFFF !important;
    border: 1px solid var(--color-border) !important;
    margin-bottom: 1rem !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
  }

  /* Categories Section: Always 100% visible on mobile */
  .kyo-filter-categories-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    width: 100% !important;
  }

  .kyo-filter-categories-label-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
  }

  .kyo-filter-group-heading {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    color: var(--color-moss) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
  }

  .kyo-filter-active-count-label {
    font-size: 0.70rem !important;
    font-weight: 600 !important;
    color: var(--color-text-secondary) !important;
  }

  /* Category Chips: Horizontal swipe with momentum & auto-centering */
  .kyo-catalog-filter-chips {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 0.4rem !important;
    padding: 0.15rem 0 0.35rem !important;
    scrollbar-width: none !important;
    scroll-snap-type: x proximity !important;
    width: 100% !important;
  }

  .kyo-catalog-filter-chips::-webkit-scrollbar {
    display: none !important;
  }

  .kyo-catalog-filter-chips .kyo-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    padding: 0.38rem 0.75rem !important;
    font-size: 0.75rem !important;
    border-radius: var(--radius-full) !important;
    scroll-snap-align: center !important;
  }

  /* Controls Row: Sorting + Toggle + 1-Click Reset */
  .kyo-catalog-filter-controls-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
    padding-top: 0.55rem !important;
    border-top: 1px solid var(--color-border-light) !important;
    width: 100% !important;
  }

  .kyo-catalog-sort-wrap {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .kyo-catalog-sort-label {
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    color: var(--color-moss) !important;
  }

  .kyo-catalog-sort-select {
    flex: 1 1 auto !important;
    max-width: 210px !important;
    font-size: 0.80rem !important;
    padding: 0.35rem 0.65rem !important;
    min-height: 36px !important;
  }

  .kyo-catalog-controls-right {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.45rem !important;
    width: 100% !important;
  }

  .kyo-filter-collapse-btn {
    min-height: 36px !important;
    font-size: 0.74rem !important;
    padding: 0.35rem 0.55rem !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .kyo-filter-reset-btn {
    min-height: 36px !important;
    font-size: 0.74rem !important;
    padding: 0.35rem 0.55rem !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
  }

  /* Collapsible Attribute Tags Drawer */
  .kyo-catalog-collapsible-tags {
    padding-top: 0.55rem !important;
    border-top: 1px dashed var(--color-border-light) !important;
  }

  .kyo-catalog-collapsible-tags:not(.is-open) {
    display: none !important;
  }

  .kyo-catalog-collapsible-tags.is-open {
    display: block !important;
  }

  .kyo-quick-tags-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
  }

  .kyo-quick-tags-title {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--color-text-muted) !important;
    text-transform: uppercase !important;
  }

  .kyo-catalog-quick-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.3rem !important;
  }

  .kyo-quick-tag {
    font-size: 0.70rem !important;
    padding: 0.25rem 0.6rem !important;
    border-radius: var(--radius-full) !important;
  }

  /* Catalog Product Grid - STRICTLY 2 ITEMS PER ROW ON PHONES */
  .kyo-product-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.6rem !important;
    margin-bottom: 1.5rem !important;
    width: 100% !important;
  }

  /* Catalog Product Card (Compact 2-Column Mobile Polish) */
  .kyo-product-card {
    padding: 0 !important;
    border-radius: var(--radius-md) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    box-sizing: border-box !important;
    background: #FFFFFF !important;
    overflow: hidden !important;
  }

  .kyo-product-thumb {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .kyo-product-thumb a {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
  }

  .kyo-product-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 0 !important;
  }

  .kyo-product-card .kyo-product-badge {
    position: absolute !important;
    top: 0.35rem !important;
    left: 0.35rem !important;
    font-size: 0.58rem !important;
    padding: 0.15rem 0.35rem !important;
    border-radius: 4px !important;
    z-index: 2 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.2 !important;
  }

  .kyo-product-card .kyo-wishlist-toggle {
    position: absolute !important;
    top: 0.35rem !important;
    right: 0.35rem !important;
    width: 28px !important;
    height: 28px !important;
    font-size: 0.85rem !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
    z-index: 3 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
  }

  .kyo-product-card .kyo-wishlist-toggle svg {
    width: 15px !important;
    height: 15px !important;
  }

  .kyo-product-body {
    padding: 0.55rem 0.55rem 0.65rem !important;
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    box-sizing: border-box !important;
  }

  .kyo-product-sku {
    font-size: 0.62rem !important;
    font-family: var(--font-mono) !important;
    color: var(--color-sage) !important;
    font-weight: 700 !important;
    margin-bottom: 0.15rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: 0.02em !important;
  }

  .kyo-product-title,
  .kyo-product-card h3 {
    font-size: 0.80rem !important;
    font-weight: 700 !important;
    color: var(--color-moss) !important;
    line-height: 1.25 !important;
    height: 2.05rem !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0.12rem 0 0.3rem !important;
  }

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

  /* Hide long card description paragraph on mobile to optimize space */
  .kyo-product-desc {
    display: none !important;
  }

  .kyo-product-card-options-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.2rem !important;
    margin-bottom: 0.45rem !important;
  }

  .kyo-card-variant-chip,
  .kyo-card-discount-chip {
    font-size: 0.56rem !important;
    padding: 0.12rem 0.3rem !important;
    border-radius: 3px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
  }

  .kyo-product-footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.35rem !important;
    margin-top: auto !important;
    padding-top: 0.35rem !important;
    border-top: 1px solid var(--color-border-light) !important;
  }

  .kyo-product-price-box {
    display: flex !important;
    align-items: baseline !important;
    gap: 0.35rem !important;
  }

  .kyo-product-price {
    font-family: var(--font-mono) !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--color-moss) !important;
  }

  .kyo-product-price-striked {
    font-family: var(--font-mono) !important;
    font-size: 0.68rem !important;
    text-decoration: line-through !important;
    color: var(--color-text-muted) !important;
  }

  .kyo-product-buy-cta {
    width: 100% !important;
    min-height: 34px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 0.38rem 0.45rem !important;
    text-align: center !important;
    justify-content: center !important;
    border-radius: 5px !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }

  /* Catalog Pagination Controls (Phone Mode) */
  .kyo-catalog-pagination-wrap {
    padding: 1.25rem 0 0.5rem !important;
    width: 100% !important;
  }

  .kyo-pagination-container {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.65rem !important;
    width: 100% !important;
  }

  .kyo-pagination-info {
    font-size: 0.78rem !important;
    color: var(--color-text-secondary) !important;
    text-align: center !important;
    line-height: 1.3 !important;
  }

  .kyo-pagination-controls {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    width: 100% !important;
  }

  .kyo-page-nav-btn {
    min-height: 36px !important;
    padding: 0.35rem 0.65rem !important;
    font-size: 0.76rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-sm) !important;
  }

  .kyo-page-numbers {
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
  }

  .kyo-page-num-btn {
    min-width: 36px !important;
    height: 36px !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    border-radius: var(--radius-sm) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1.5px solid var(--color-border) !important;
    background: #FFFFFF !important;
    color: var(--color-moss) !important;
    cursor: pointer !important;
  }

  .kyo-page-num-btn.active {
    background: var(--color-moss) !important;
    color: #FFFFFF !important;
    border-color: var(--color-moss) !important;
  }

  /* 3. Product Detail View (produkt-ansicht.html) */
  .kyo-pdp-container {
    padding: 0 !important;
  }

  .kyo-pdp-top-bar {
    margin-bottom: 0.85rem !important;
    font-size: 0.80rem !important;
  }

  .kyo-gallery-main {
    max-height: 320px !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: 0.85rem !important;
  }

  .kyo-pdp-trust-card {
    padding: 0.85rem 1rem !important;
    gap: 0.75rem !important;
    margin-bottom: 1.25rem !important;
    border-radius: var(--radius-md) !important;
  }

  .kyo-pdp-trust-item {
    font-size: 0.78rem !important;
    gap: 0.65rem !important;
  }

  .kyo-pdp-trust-item p {
    font-size: 0.74rem !important;
    line-height: 1.35 !important;
  }

  .kyo-pdp-title {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
    margin: 0.35rem 0 0.5rem !important;
  }

  .kyo-pdp-subtitle {
    font-size: 0.88rem !important;
    line-height: 1.45 !important;
    margin-bottom: 0.75rem !important;
  }

  .kyo-pdp-meta-row {
    gap: 0.35rem !important;
    margin-bottom: 0.85rem !important;
  }

  .kyo-pdp-benefits-grid {
    grid-template-columns: 1fr !important;
    gap: 0.45rem !important;
    margin-bottom: 1rem !important;
  }

  .kyo-pdp-benefit-card {
    padding: 0.6rem 0.75rem !important;
    border-radius: var(--radius-sm) !important;
  }

  .kyo-pdp-benefit-title {
    font-size: 0.84rem !important;
    margin-bottom: 0.15rem !important;
  }

  .kyo-pdp-benefit-desc {
    font-size: 0.75rem !important;
    line-height: 1.35 !important;
  }

  .kyo-pdp-variant-chips {
    gap: 0.4rem !important;
  }

  .kyo-pdp-variant-chip {
    padding: 0.45rem 0.75rem !important;
    font-size: 0.82rem !important;
    min-height: 40px !important;
  }

  .kyo-pdp-cta-row {
    margin-top: 1rem !important;
    gap: 0.65rem !important;
  }

  .kyo-pdp-buy-btn {
    min-height: 46px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
  }

  /* 4. System Pakete (system-pakete.html) */
  .kyo-bento-card--package {
    padding: 1.15rem 0.95rem !important;
    border-radius: var(--radius-lg) !important;
  }

  .kyo-bundle-thumb {
    aspect-ratio: 16 / 10 !important;
    max-height: 185px !important;
    margin-bottom: 0.75rem !important;
    border-radius: var(--radius-md) !important;
  }

  .kyo-package-includes {
    padding: 0.75rem 0.85rem !important;
    margin-bottom: 0.75rem !important;
    border-radius: var(--radius-sm) !important;
  }

  .kyo-package-includes-title {
    font-size: 0.76rem !important;
    margin-bottom: 0.4rem !important;
  }

  .kyo-package-includes-list li {
    font-size: 0.78rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.3rem !important;
  }

  /* 5. Manufaktur & Qualitaet (manufaktur-qualitaet.html) */
  .kyo-editorial-frame {
    margin-bottom: 1rem !important;
    max-height: 220px !important;
    border-radius: var(--radius-lg) !important;
  }

  /* 6. Experten-Sprechstunde & IPSS Check (experten-sprechstunde.html) */
  .kyo-gleitwort-card {
    padding: 1.25rem 1rem !important;
    border-radius: var(--radius-lg) !important;
  }

  .kyo-editorial-meta-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.35rem !important;
    padding-bottom: 0.65rem !important;
    margin-bottom: 1rem !important;
  }

  .kyo-editorial-meta-header .kyo-editorial-tag {
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.06em !important;
    display: block !important;
  }

  .kyo-editorial-meta-header .kyo-editorial-author {
    font-size: 0.74rem !important;
    line-height: 1.25 !important;
    display: block !important;
  }

  #kyoExpertSelfTest {
    padding: 1.15rem 0.85rem !important;
    margin: 1.25rem auto !important;
    border-radius: var(--radius-lg) !important;
  }

  .kyo-expert-q-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
  }

  .kyo-expert-opt-card {
    padding: 0.65rem 0.65rem !important;
    border-radius: var(--radius-md) !important;
    min-height: 52px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
    text-align: left !important;
    min-width: 0 !important;
  }

  .kyo-expert-opt-card:nth-child(3):last-child {
    grid-column: 1 / -1 !important;
  }

  .kyo-expert-opt-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 0.35rem !important;
    width: 100% !important;
    margin-bottom: 0.2rem !important;
  }

  .kyo-expert-opt-title {
    font-size: 0.80rem !important;
    font-weight: 750 !important;
    line-height: 1.2 !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }

  .kyo-expert-opt-radio {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
  }

  .kyo-expert-opt-desc {
    font-size: 0.68rem !important;
    line-height: 1.28 !important;
    color: var(--color-text-secondary) !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .kyo-expert-opt-card.selected .kyo-expert-opt-desc {
    color: rgba(255, 255, 255, 0.9) !important;
  }

  /* 7. Diskrete Logistik & Tracking (diskrete-logistik.html, paket-status.html) */
  .kyo-tracking-section {
    padding: 1.25rem 0 3rem !important;
  }

  .kyo-tracking-card {
    padding: 1rem 0.8rem !important;
    border-radius: var(--radius-lg) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .kyo-tracking-result-box {
    padding: 0.85rem 0.75rem !important;
    margin-top: 1rem !important;
    border-radius: var(--radius-md) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    overflow: hidden !important;
  }

  .kyo-tracking-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.55rem !important;
    margin-bottom: 0.85rem !important;
  }

  .kyo-tracking-header h3 {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
  }

  .kyo-tracking-pulse {
    align-self: flex-start !important;
    font-size: 0.72rem !important;
    padding: 0.3rem 0.7rem !important;
  }

  .kyo-tracking-item-row {
    padding: 0.6rem 0.7rem !important;
    gap: 0.6rem !important;
    border-radius: var(--radius-md) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    background: var(--color-sand) !important;
  }

  .kyo-tracking-item-thumb {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 8px !important;
  }

  .kyo-tracking-item-title {
    font-size: 0.86rem !important;
    line-height: 1.25 !important;
    word-break: break-word !important;
  }

  .kyo-tracking-item-meta {
    font-size: 0.72rem !important;
    gap: 0.25rem !important;
  }

  .kyo-tracking-item-price {
    font-size: 0.94rem !important;
  }

  .kyo-tracking-info-box {
    padding: 0.75rem 0.8rem !important;
    font-size: 0.80rem !important;
    line-height: 1.4 !important;
  }

  .kyo-tracking-actions {
    flex-direction: column !important;
    gap: 0.55rem !important;
    width: 100% !important;
    margin-top: 1rem !important;
  }

  .kyo-tracking-actions .kyo-btn {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: center !important;
    font-size: 0.90rem !important;
  }

  .kyo-tracking-input-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    width: 100% !important;
  }

  .kyo-tracking-input-row .kyo-form-control {
    width: 100% !important;
    min-height: 46px !important;
    font-size: 16px !important;
  }

  .kyo-tracking-submit-btn {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 0.88rem !important;
    font-weight: 750 !important;
  }

  /* 4-Step Stepper Timeline on Mobile (Both Receipt and Tracking) */
  .kyo-stepper-wrap {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.2rem !important;
    margin: 1.15rem 0 !important;
  }

  .kyo-step-circle {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.72rem !important;
    margin-bottom: 0.25rem !important;
  }

  .kyo-step-label {
    font-size: 0.65rem !important;
    line-height: 1.15 !important;
    display: block !important;
    word-break: normal !important;
    overflow: visible !important;
    text-align: center !important;
  }

  .kyo-step-desc {
    font-size: 0.58rem !important;
    color: var(--color-text-muted) !important;
    text-align: center !important;
  }

  /* 8. Fachjournal & Journal-Artikel (fachjournal.html, journal-artikel.html) */
  .kyo-journal-card {
    padding: 1.15rem 0.95rem !important;
    border-radius: var(--radius-lg) !important;
  }

  .kyo-journal-card h2 {
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
  }

  /* 9. Kundenservice & FAQ (kundenservice.html) */
  .kyo-faq-summary {
    padding: 0.85rem 0.95rem !important;
    font-size: 0.86rem !important;
    line-height: 1.35 !important;
  }

  .kyo-faq-content {
    padding: 0.85rem 0.95rem !important;
    font-size: 0.82rem !important;
    line-height: 1.5 !important;
  }

  .kyo-topic-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.45rem !important;
    margin-bottom: 1.15rem !important;
  }

  .kyo-topic-btn {
    padding: 0.5rem 0.35rem !important;
    font-size: 0.74rem !important;
    min-height: 40px !important;
    text-align: center !important;
  }

  /* 10. Warenkorb (warenkorb.html) */
  #kyoCartActionBar {
    padding: 0.65rem 0.85rem !important;
    gap: 0.5rem !important;
    border-radius: var(--radius-md) !important;
  }

  .kyo-cart-summary-card {
    padding: 1.15rem 0.95rem !important;
    border-radius: var(--radius-lg) !important;
  }

  .kyo-cart-checkout-btn {
    min-height: 48px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
  }

  /* 11. Kasse per Nachnahme (kasse-diskret.html) */
  .kyo-checkout-form {
    padding: 1.15rem 0.95rem !important;
    border-radius: var(--radius-lg) !important;
  }

  .kyo-form-control {
    font-size: 16px !important; /* Prevents auto-zoom in iOS Safari */
    min-height: 44px !important;
    padding: 0.65rem 0.85rem !important;
  }

  .kyo-cod-notice-badge {
    padding: 0.75rem 0.85rem !important;
    margin: 1rem 0 !important;
    font-size: 0.80rem !important;
    border-radius: var(--radius-md) !important;
  }

  .kyo-checkout-submit-btn,
  .kyo-checkout-form button[type="submit"] {
    white-space: normal !important;
    line-height: 1.25 !important;
    height: auto !important;
    min-height: 52px !important;
    padding: 0.75rem 1rem !important;
    font-size: 0.95rem !important;
    text-align: center !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }

  .kyo-checkout-summary-thumb {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
  }

  /* 12. Bestellbestätigung (bestellung-bestaetigt.html) */
  .kyo-receipt-card {
    padding: 0.95rem 0.8rem !important;
    border-radius: var(--radius-lg) !important;
    margin: 0.75rem auto 2rem !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  .kyo-receipt-totals-box {
    padding: 0.75rem 0.8rem !important;
    margin: 1.15rem 0 1.25rem !important;
    border-radius: var(--radius-md) !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .kyo-receipt-totals-row {
    font-size: 0.82rem !important;
    gap: 0.4rem !important;
  }

  .kyo-receipt-totals-row--grand {
    font-size: 0.94rem !important;
    line-height: 1.25 !important;
  }

  .kyo-receipt-totals-row--grand .kyo-receipt-totals-val {
    font-size: 1.05rem !important;
  }

  .kyo-receipt-item-row {
    padding: 0.6rem 0.65rem !important;
    gap: 0.55rem !important;
  }

  .kyo-receipt-item-thumb {
    width: 52px !important;
    height: 52px !important;
    min-width: 52px !important;
    border-radius: 8px !important;
  }

  .kyo-receipt-item-price {
    font-size: 0.94rem !important;
  }

  .kyo-receipt-action-grid {
    flex-direction: column !important;
    gap: 0.65rem !important;
    width: 100% !important;
    margin: 1.25rem 0 0.85rem !important;
  }

  .kyo-receipt-btn-track {
    width: 100% !important;
    min-height: 48px !important;
    font-size: 0.92rem !important;
  }

  .kyo-receipt-btn-print {
    width: 100% !important;
    min-height: 44px !important;
    font-size: 0.85rem !important;
  }

  .kyo-receipt-support-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.5rem !important;
    width: 100% !important;
  }

  .kyo-receipt-support-btn {
    padding: 0.55rem 0.35rem !important;
    font-size: 0.75rem !important;
  }

  /* 13. Merkzettel (merkzettel.html) */
  .kyo-wishlist-header-bar {
    padding: 0.65rem 0.85rem !important;
    border-radius: var(--radius-md) !important;
  }

  /* 14. Rechtliche Seiten (Impressum, Datenschutz, AGB, Widerruf) */
  .kyo-bento-card {
    padding: 1.15rem 0.95rem !important;
    border-radius: var(--radius-lg) !important;
  }

  /* ==========================================================================
     15. PHONE ADAPTATIONS: STICKY HEADER, TOPBAR & PRE-FOOTER BANNER
     ========================================================================== */
  /* Sticky Header in Phone Mode */
  .kyo-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    box-shadow: 0 2px 14px rgba(27, 42, 33, 0.08) !important;
    width: 100% !important;
  }

  /* Adapted Sleek Topbar above Header */
  .kyo-topbar {
    padding: 0.35rem 0.65rem !important;
    min-height: 28px !important;
  }

  .kyo-topbar-desktop {
    display: none !important;
  }

  .kyo-topbar-mobile {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    width: 100% !important;
    font-size: 0.72rem !important;
    line-height: 1.25 !important;
  }

  .kyo-topbar-mobile span {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Compact & Space-Efficient Pre-Footer Voucher Banner (Mobile Phone Optimization) */
  .kyo-prefooter-banner {
    padding: 0.85rem 0 2.25rem !important;
  }

  .kyo-prefooter-card {
    flex-direction: column !important;
    padding: 0.85rem 0.85rem !important;
    gap: 0.65rem !important;
    border-radius: var(--radius-md) !important;
    box-shadow: 0 4px 18px rgba(27, 42, 33, 0.04) !important;
  }

  .kyo-prefooter-content {
    width: 100% !important;
  }

  .kyo-prefooter-badge-row {
    display: flex !important;
    align-items: center !important;
    gap: 0.35rem !important;
    flex-wrap: wrap !important;
    margin-bottom: 0.35rem !important;
  }

  .kyo-prefooter-badge {
    font-size: 0.64rem !important;
    padding: 0.16rem 0.45rem !important;
    white-space: nowrap !important;
    letter-spacing: 0.02em !important;
    border-radius: var(--radius-full) !important;
  }

  .kyo-prefooter-subbadge {
    font-size: 0.66rem !important;
    color: var(--color-text-secondary) !important;
  }

  .kyo-prefooter-action {
    width: 100% !important;
    flex: auto !important;
  }

  .kyo-prefooter-heading {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    margin: 0.15rem 0 0.35rem !important;
  }

  .kyo-prefooter-desc {
    font-size: 0.76rem !important;
    line-height: 1.38 !important;
    margin-bottom: 0.55rem !important;
    color: var(--color-text-secondary) !important;
  }

  /* 2-Column Benefits Grid on Mobile to cut vertical height in half */
  .kyo-prefooter-benefits {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.3rem 0.5rem !important;
    margin-bottom: 0.45rem !important;
  }

  .kyo-prefooter-benefit-item {
    font-size: 0.70rem !important;
    line-height: 1.25 !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.3rem !important;
  }

  .kyo-prefooter-benefit-item svg {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
  }

  /* Compact Dashed Voucher Box */
  .kyo-voucher-box {
    padding: 0.75rem 0.75rem !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: var(--radius-sm) !important;
    border: 1.5px dashed rgba(199, 93, 56, 0.45) !important;
    background: rgba(199, 93, 56, 0.03) !important;
  }

  .kyo-voucher-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0.45rem !important;
  }

  .kyo-voucher-tag {
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
  }

  .kyo-voucher-discount {
    font-size: 0.65rem !important;
    padding: 0.12rem 0.4rem !important;
    border-radius: var(--radius-full) !important;
  }

  .kyo-voucher-code-container {
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: stretch !important;
    background: #FFFFFF !important;
    border: 1.5px solid rgba(199, 93, 56, 0.45) !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden !important;
    margin-bottom: 0.35rem !important;
    min-height: 38px !important;
  }

  .kyo-voucher-code-wrap {
    flex: 1 1 auto !important;
    display: flex !important;
    align-items: center !important;
    padding: 0.35rem 0.6rem !important;
  }

  .kyo-voucher-code {
    font-size: 0.96rem !important;
    letter-spacing: 0.06em !important;
    font-weight: 800 !important;
  }

  .kyo-voucher-copy-btn {
    min-height: 38px !important;
    font-size: 0.74rem !important;
    padding: 0.35rem 0.7rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
  }

  .kyo-voucher-note {
    font-size: 0.66rem !important;
    line-height: 1.25 !important;
    text-align: center !important;
    margin-bottom: 0.55rem !important;
    color: var(--color-text-secondary) !important;
  }

  .kyo-voucher-actions {
    width: 100% !important;
    margin-bottom: 0.25rem !important;
  }

  .kyo-voucher-cta-btn {
    min-height: 40px !important;
    font-size: 0.80rem !important;
    font-weight: 700 !important;
    justify-content: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 6px !important;
  }

  /* Ensure Cookie Modal body has ample scroll clearance above pinned footer */
  .kyo-cookie-modal-body {
    padding-bottom: 2.25rem !important;
  }

  /* ==========================================================================
     16. PROFESSIONAL OFF-CANVAS MOBILE SIDE DRAWER (ON TOP OF PAGE & FIXED)
     ========================================================================== */
  /* Hide the old in-flow subnav on phones completely */
  .kyo-header-subnav {
    display: none !important;
  }

  /* Lock body/page scroll when mobile side menu is open */
  body.kyo-menu-open,
  html.kyo-menu-open {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* Off-Canvas Backdrop Overlay */
  .kyo-mobile-drawer-overlay {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    background-color: rgba(10, 20, 16, 0.75) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    z-index: 99998 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .kyo-mobile-drawer-overlay.open {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Off-Canvas Full-Screen Side Drawer Menu */
  .kyo-mobile-drawer {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    width: 100% !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: #FFFFFF !important;
    z-index: 99999 !important;
    transform: translateX(100%) !important;
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1) !important;
    box-shadow: none !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  .kyo-mobile-drawer.open {
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  /* Drawer Header */
  .kyo-mobile-drawer-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: max(0.95rem, env(safe-area-inset-top)) 1.25rem 0.85rem !important;
    background: #FFFFFF !important;
    border-bottom: 1px solid #EBEFEA !important;
    flex-shrink: 0 !important;
  }

  .kyo-mobile-drawer-brand img {
    height: 36px !important;
    width: auto !important;
    display: block !important;
  }

  .kyo-mobile-drawer-close {
    background: #F3F6F4 !important;
    border: 1.5px solid #DFE6E2 !important;
    border-radius: var(--radius-full) !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--color-moss) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    padding: 0 !important;
  }

  .kyo-mobile-drawer-close:active {
    background: #E2E8E4 !important;
    transform: scale(0.95) !important;
  }

  /* Drawer Search */
  .kyo-mobile-drawer-search {
    padding: 0.85rem 1.25rem !important;
    background: #FAFBF9 !important;
    border-bottom: 1px solid #EBEFEA !important;
    flex-shrink: 0 !important;
  }

  .kyo-mobile-search-wrap {
    display: flex !important;
    align-items: center !important;
    background: #FFFFFF !important;
    border: 1.5px solid #DFE6E2 !important;
    border-radius: var(--radius-md) !important;
    padding: 0 0.5rem 0 0.85rem !important;
    min-height: 44px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
  }

  .kyo-mobile-search-icon {
    color: var(--color-sage) !important;
    flex-shrink: 0 !important;
    margin-right: 0.5rem !important;
  }

  .kyo-mobile-search-input {
    width: 100% !important;
    border: none !important;
    background: transparent !important;
    font-size: 16px !important; /* Prevents iOS auto-zoom */
    color: var(--color-moss) !important;
    outline: none !important;
    padding: 0.4rem 0 !important;
  }

  .kyo-mobile-search-submit {
    background: var(--color-terracotta) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
  }

  /* Drawer Body */
  .kyo-mobile-drawer-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 1.15rem 1.15rem 2.5rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1.15rem !important;
  }

  /* Direct Return-to-Home Action Card in Drawer */
  .kyo-mobile-home-card {
    display: flex !important;
    align-items: center !important;
    gap: 0.85rem !important;
    padding: 0.85rem 1rem !important;
    background: linear-gradient(135deg, rgba(74, 107, 98, 0.08) 0%, rgba(210, 84, 39, 0.05) 100%) !important;
    border: 1.5px solid rgba(74, 107, 98, 0.22) !important;
    border-radius: var(--radius-md) !important;
    text-decoration: none !important;
    margin-bottom: 0.25rem !important;
    box-shadow: 0 2px 8px rgba(27, 42, 33, 0.05) !important;
    transition: all 0.2s ease !important;
  }

  .kyo-mobile-home-card:active {
    background: linear-gradient(135deg, rgba(74, 107, 98, 0.15) 0%, rgba(210, 84, 39, 0.1) 100%) !important;
    transform: scale(0.98) !important;
  }

  .kyo-mobile-home-icon {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: var(--color-moss) !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    box-shadow: 0 3px 8px rgba(27, 42, 33, 0.2) !important;
  }

  .kyo-mobile-home-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.15rem !important;
  }

  .kyo-mobile-home-title {
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    color: var(--color-moss) !important;
    line-height: 1.2 !important;
  }

  .kyo-mobile-home-sub {
    font-size: 0.74rem !important;
    color: var(--color-text-secondary) !important;
    line-height: 1.25 !important;
  }

  .kyo-mobile-home-arrow {
    color: var(--color-sage) !important;
    flex-shrink: 0 !important;
  }

  .kyo-mobile-section {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
  }

  .kyo-mobile-section-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 0.2rem !important;
  }

  .kyo-mobile-section-title {
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--color-sage) !important;
  }

  .kyo-mobile-section-badge {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: var(--color-terracotta) !important;
    background: rgba(199, 93, 56, 0.1) !important;
    padding: 0.15rem 0.45rem !important;
    border-radius: var(--radius-full) !important;
  }

  /* Category 2x2 Bento Grid */
  .kyo-mobile-cat-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 0.65rem !important;
  }

  .kyo-mobile-cat-card {
    display: flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    background: #F7F9F7 !important;
    border: 1px solid #E2E8E4 !important;
    border-radius: var(--radius-md) !important;
    padding: 0.85rem 0.75rem !important;
    text-decoration: none !important;
    min-height: 68px !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
  }

  .kyo-mobile-cat-card:active {
    background: #EAF0EC !important;
    transform: scale(0.98) !important;
  }

  .kyo-mobile-cat-icon-wrap {
    font-size: 1.35rem !important;
    flex-shrink: 0 !important;
  }

  .kyo-mobile-cat-info {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
  }

  .kyo-mobile-cat-title {
    font-size: 0.78rem !important;
    font-weight: 750 !important;
    color: var(--color-moss) !important;
    line-height: 1.25 !important;
  }

  .kyo-mobile-cat-desc {
    font-size: 0.66rem !important;
    color: var(--color-sage) !important;
    line-height: 1.2 !important;
    margin-top: 0.15rem !important;
  }

  .kyo-mobile-catalog-cta {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 0.75rem 1rem !important;
    background: #FFFFFF !important;
    border: 1.5px solid var(--color-moss) !important;
    border-radius: var(--radius-md) !important;
    color: var(--color-moss) !important;
    font-size: 0.84rem !important;
    font-weight: 750 !important;
    text-decoration: none !important;
    margin-top: 0.25rem !important;
    transition: all 0.15s ease !important;
  }

  .kyo-mobile-catalog-cta:active {
    background: #F4F6F4 !important;
  }

  /* System-Pakete Featured Banner */
  .kyo-mobile-bundle-banner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
    padding: 1.15rem 1.15rem !important;
    background: linear-gradient(135deg, rgba(199, 93, 56, 0.08) 0%, rgba(46, 85, 62, 0.06) 100%) !important;
    border: 1.5px solid rgba(199, 93, 56, 0.35) !important;
    border-radius: var(--radius-lg) !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
  }

  .kyo-mobile-bundle-banner:active {
    background: linear-gradient(135deg, rgba(199, 93, 56, 0.14) 0%, rgba(46, 85, 62, 0.10) 100%) !important;
  }

  .kyo-mobile-bundle-top {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .kyo-mobile-bundle-badge {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    color: var(--color-terracotta) !important;
    letter-spacing: 0.04em !important;
  }

  .kyo-mobile-bundle-discount {
    background: var(--color-terracotta) !important;
    color: #FFFFFF !important;
    font-size: 0.72rem !important;
    font-weight: 800 !important;
    padding: 0.18rem 0.55rem !important;
    border-radius: var(--radius-full) !important;
  }

  .kyo-mobile-bundle-title {
    font-size: 1.05rem !important;
    font-weight: 800 !important;
    color: var(--color-moss) !important;
    line-height: 1.25 !important;
  }

  .kyo-mobile-bundle-desc {
    font-size: 0.78rem !important;
    color: #4B6354 !important;
    line-height: 1.4 !important;
  }

  .kyo-mobile-bundle-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    color: var(--color-terracotta) !important;
    margin-top: 0.35rem !important;
  }

  /* Navigation & Research List */
  .kyo-mobile-menu-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
  }

  .kyo-mobile-menu-link {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.75rem 0.95rem !important;
    background: #FAFBF9 !important;
    border: 1px solid #EBEFEA !important;
    border-radius: var(--radius-md) !important;
    text-decoration: none !important;
    min-height: 52px !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
  }

  .kyo-mobile-menu-link:active {
    background: #F0F4F1 !important;
  }

  .kyo-mobile-menu-icon-box {
    width: 38px !important;
    height: 38px !important;
    border-radius: var(--radius-md) !important;
    background: #FFFFFF !important;
    border: 1px solid #E0E7E2 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
  }

  .kyo-mobile-menu-text {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
  }

  .kyo-mobile-menu-text strong {
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    color: var(--color-moss) !important;
    line-height: 1.25 !important;
  }

  .kyo-mobile-menu-text span {
    font-size: 0.68rem !important;
    color: var(--color-sage) !important;
    line-height: 1.2 !important;
    margin-top: 0.1rem !important;
  }

  .kyo-mobile-menu-arrow {
    color: #A9BDB4 !important;
    flex-shrink: 0 !important;
  }

  /* Quick Action Utilities Grid */
  .kyo-mobile-quick-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.55rem !important;
  }

  .kyo-mobile-quick-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 0.35rem !important;
    padding: 0.85rem 0.3rem 0.75rem !important;
    background: #F8FAF8 !important;
    border: 1px solid #E2E8E4 !important;
    border-radius: var(--radius-md) !important;
    text-decoration: none !important;
    min-height: 78px !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
  }

  .kyo-mobile-quick-card:active {
    background: #EAF0EC !important;
    transform: scale(0.97) !important;
  }

  .kyo-mobile-quick-icon {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 0.15rem !important;
  }

  .kyo-mobile-quick-icon svg {
    color: var(--color-terracotta) !important;
    width: 22px !important;
    height: 22px !important;
  }

  .kyo-mobile-mini-badge {
    position: absolute !important;
    top: -6px !important;
    right: -10px !important;
    background: var(--color-terracotta) !important;
    color: #FFFFFF !important;
    font-size: 0.58rem !important;
    font-weight: 800 !important;
    min-width: 15px !important;
    height: 15px !important;
    border-radius: var(--radius-full) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 3px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
    line-height: 1 !important;
  }

  .kyo-mobile-quick-card strong {
    font-size: 0.74rem !important;
    font-weight: 750 !important;
    color: var(--color-moss) !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  .kyo-mobile-quick-sub {
    font-size: 0.65rem !important;
    color: var(--color-sage) !important;
    white-space: nowrap !important;
    line-height: 1.15 !important;
  }

  /* Voucher Promo Card (Ultra-Compact & No Orphan Wraps) */
  .kyo-mobile-voucher-card {
    background: linear-gradient(135deg, rgba(199, 93, 56, 0.05), rgba(46, 85, 62, 0.05)) !important;
    border: 1.5px dashed rgba(199, 93, 56, 0.45) !important;
    border-radius: var(--radius-md) !important;
    padding: 0.65rem 0.85rem !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.45rem !important;
  }

  .kyo-mobile-voucher-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .kyo-mobile-voucher-badge {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    color: var(--color-moss) !important;
    letter-spacing: 0.03em !important;
  }

  .kyo-mobile-voucher-save {
    font-size: 0.68rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    background: var(--color-terracotta) !important;
    padding: 0.12rem 0.45rem !important;
    border-radius: var(--radius-full) !important;
  }

  .kyo-mobile-voucher-row {
    display: flex !important;
    align-items: stretch !important;
    gap: 0.45rem !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(199, 93, 56, 0.35) !important;
    border-radius: var(--radius-sm) !important;
    padding: 0.25rem 0.25rem 0.25rem 0.65rem !important;
  }

  .kyo-mobile-voucher-code {
    font-family: var(--font-mono) !important;
    font-size: 0.98rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.06em !important;
    color: var(--color-moss) !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
  }

  .kyo-mobile-voucher-btn {
    background: var(--color-terracotta) !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    padding: 0.4rem 0.75rem !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.15s ease !important;
  }

  .kyo-mobile-voucher-btn:active {
    background: #b84c24 !important;
  }

  .kyo-mobile-voucher-sub {
    font-size: 0.67rem !important;
    color: var(--color-sage) !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* Drawer Footer */
  .kyo-mobile-drawer-footer {
    flex-shrink: 0 !important;
    padding: 0.85rem 1.15rem max(0.95rem, env(safe-area-inset-bottom)) !important;
    background: #FAFBF9 !important;
    border-top: 1px solid #EBEFEA !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.55rem !important;
    text-align: center !important;
  }

  .kyo-mobile-footer-trust-grid {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.65rem !important;
    flex-wrap: wrap !important;
  }

  .kyo-mobile-footer-trust-pill {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 0.72rem !important;
    font-weight: 600 !important;
    color: var(--color-moss) !important;
    white-space: nowrap !important;
  }

  .kyo-mobile-footer-contact {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
    align-items: center !important;
    text-align: center !important;
  }

  .kyo-mobile-footer-phone-row {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    font-size: 0.74rem !important;
    color: var(--color-moss) !important;
    white-space: nowrap !important;
  }

  .kyo-mobile-phone-link {
    font-weight: 750 !important;
    color: var(--color-moss) !important;
    text-decoration: underline !important;
    white-space: nowrap !important;
  }

  .kyo-mobile-footer-hours-row {
    font-size: 0.67rem !important;
    color: var(--color-sage) !important;
    white-space: nowrap !important;
  }

  .kyo-mobile-footer-legal {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.45rem !important;
    font-size: 0.68rem !important;
    color: var(--color-text-muted) !important;
    margin-top: 0.1rem !important;
    white-space: nowrap !important;
  }

  .kyo-mobile-footer-legal a {
    color: var(--color-text-muted) !important;
    text-decoration: none !important;
  }

  .kyo-legal-bullet {
    color: #BDCBC3 !important;
  }
}

/* ==========================================================================
   MOBILE BOTTOM APP NAVIGATION BAR (Phone Mode <= 768px)
   ========================================================================== */
.kyo-mobile-bottom-nav {
  display: none !important;
}

@media (max-width: 768px) {
  .kyo-mobile-bottom-nav {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(27, 42, 33, 0.1) !important;
    box-shadow: 0 -4px 20px rgba(27, 42, 33, 0.08) !important;
    z-index: 9990 !important;
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  .kyo-bottom-nav-inner {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    height: 58px !important;
    align-items: center !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    padding: 0 0.25rem !important;
  }

  .kyo-bottom-nav-item {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    color: #4A5B52 !important;
    padding: 4px 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    position: relative !important;
    transition: color 0.18s ease, transform 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    font-family: inherit !important;
  }

  .kyo-bottom-nav-item:active {
    transform: scale(0.93) !important;
  }

  .kyo-bottom-nav-item.active {
    color: var(--color-terracotta, #B4533C) !important;
    font-weight: 700 !important;
  }

  .kyo-bottom-nav-icon-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    height: 26px !important;
    margin-bottom: 2px !important;
  }

  .kyo-bottom-nav-icon-wrap svg {
    display: block !important;
    stroke: currentColor !important;
    transition: transform 0.2s ease, stroke 0.2s ease !important;
  }

  .kyo-bottom-nav-item.active .kyo-bottom-nav-icon-wrap svg {
    stroke: var(--color-terracotta, #B4533C) !important;
    stroke-width: 2.2 !important;
  }

  .kyo-bottom-nav-label {
    font-size: 0.68rem !important;
    letter-spacing: 0.01em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  /* Badge indicator on bottom nav items */
  .kyo-bottom-nav-badge {
    position: absolute !important;
    top: -4px !important;
    right: -8px !important;
    background: var(--color-terracotta, #B4533C) !important;
    color: #FFFFFF !important;
    font-size: 0.62rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 4px !important;
    border-radius: 999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 5px rgba(180, 83, 60, 0.4) !important;
    border: 1.5px solid #FFFFFF !important;
  }

  /* Page clearance: ensure page bottom content is never covered */
  body {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* Hide floating cookie pill on phone screens to prevent it from obscuring CTAs, modals and bottom checkout actions.
     Cookie settings remain 1-tap accessible via Mobile Drawer and Footer. */
  .kyo-cookie-pill {
    display: none !important;
  }

  /* Elevate product detail page sticky bar safely above bottom nav if present */
  .kyo-pdp-sticky-bar {
    bottom: calc(58px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Hide cookie pill whenever any modal, popup, or drawer is open across all viewports */
body.kyo-modal-open .kyo-cookie-pill,
body.kyo-drawer-open .kyo-cookie-pill,
body:has(.kyo-modal.active) .kyo-cookie-pill,
body:has(.kyo-cookie-modal.active) .kyo-cookie-pill,
body:has(#kyoWelcomeModal.active) .kyo-cookie-pill,
body:has(.kyo-welcome-modal.active) .kyo-cookie-pill,
body:has(.kyo-cart-drawer.active) .kyo-cookie-pill,
body:has(.kyo-mobile-drawer.active) .kyo-cookie-pill,
body.page-warenkorb .kyo-cookie-pill,
body.page-kasse-diskret .kyo-cookie-pill {
  display: none !important;
}