/** Shopify CDN: Minification failed

Line 706:0 All "@import" rules must come first
Line 1349:0 Unexpected "}"
Line 8486:0 All "@import" rules must come first

**/
/* Ergonix Product Complete Styles - All sections combined */
/* All styles scoped with .ergonix-wrapper to avoid conflicts */
/* Homepage styles scoped with .ergonix-homepage-wrapper */

/* =========================== */
/* COLOR SYSTEM - CUSTOM PROPERTIES */
/* =========================== */
:root {
    /* Primary brand colors */
    --ergonix-primary: #04ac9c;
    --ergonix-primary-hover: #03998a;
    --ergonix-primary-light: rgba(4, 172, 156, 0.1);
    
    /* Background colors */
    --ergonix-bg-main: #f3f3f3;
    --ergonix-bg-surface: white;
    --ergonix-bg-surface-alt: #fafafa;
    
    /* Text colors */
    --ergonix-text-primary: #1a1a1a;
    --ergonix-text-secondary: #716666;
    --ergonix-text-light: #999999;
    
    /* Border colors */
    --ergonix-border: #e5e5e5;
    --ergonix-border-light: #e0e0e0;
    
    /* Status colors */
    --ergonix-danger: #f9373f;
    --ergonix-danger-gradient: linear-gradient(90deg, rgba(249, 55, 63, 0.5), #f9373f);
    --ergonix-success: #4caf50;
    --ergonix-warning: #ffd700;
    
    /* Component specific */
    --ergonix-card-bg: white;
    --ergonix-card-radius: 12px;
    --ergonix-card-padding: 24px 32px;
}

/* =========================== */
/* RESPONSIVE DISPLAY CLASSES */
/* =========================== */
.ergonix-wrapper .ergonix-desktop-only {
    display: block;
}

.ergonix-wrapper .ergonix-mobile-only {
    display: none;
}

@media (max-width: 768px) {
    /* CRITICAL: Prevent horizontal scrolling on mobile */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    .ergonix-wrapper,
    .ergonix-homepage-wrapper {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        box-sizing: border-box;
    }
    
    /* Ensure all sections stay within viewport */
    .ergonix-wrapper > *,
    .ergonix-homepage-wrapper > * {
        max-width: 100vw !important;
        box-sizing: border-box;
    }
    
    /* Safety measure for all absolute positioned elements */
    .ergonix-wrapper [style*="position: absolute"],
    .ergonix-wrapper .absolute,
    .ergonix-homepage-wrapper [style*="position: absolute"],
    .ergonix-homepage-wrapper .absolute {
        max-width: calc(100vw - 40px) !important;
    }
    
    .ergonix-wrapper .ergonix-desktop-only {
        display: none !important;
    }
    
    .ergonix-wrapper .ergonix-mobile-only {
        display: block !important;
    }
    
    /* Hide certification detail items on mobile */
    .ergonix-wrapper .certifications-details {
        display: none !important;
    }
    
    /* Hide relief card text overlay on mobile */
    .ergonix-wrapper .relief-card {
        display: none !important;
    }
    
    /* Hide desktop pressure overlay card on mobile */
    .ergonix-wrapper .desktop-pressure-card {
        display: none !important;
    }
}

/* =========================== */
/* MOBILE STYLES */
/* =========================== */

/* PIXEL-PERFECT MOBILE HEADER - FIGMA EXACT MATCH */
.ergonix-wrapper .mobile-header {
    position: fixed;
    top: 37px;
    left: 10px;
    right: 10px;
    z-index: 1000;
    transform: translateY(0);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Hide state for mobile header */
.ergonix-wrapper .mobile-header.hidden {
    transform: translateY(-100%);
}

/* Auto-hide header using existing scroll direction system */

/* Hide headers when scrolling down */
header-component[data-scroll-direction="down"] .ergonix-wrapper .header.ergonix-desktop-only {
    transform: translateY(calc(-100% - 36px));
}

header-component[data-scroll-direction="down"] .ergonix-wrapper .mobile-header.ergonix-mobile-only {
    transform: translateY(calc(-100% - 37px));
}

/* Show headers when scrolling up or at top */
header-component[data-scroll-direction="up"] .ergonix-wrapper .header.ergonix-desktop-only,
header-component[data-scroll-direction="none"] .ergonix-wrapper .header.ergonix-desktop-only {
    transform: translateY(0);
}

header-component[data-scroll-direction="up"] .ergonix-wrapper .mobile-header.ergonix-mobile-only,
header-component[data-scroll-direction="none"] .ergonix-wrapper .mobile-header.ergonix-mobile-only {
    transform: translateY(0);
}

/* Smooth transitions for both headers */
.ergonix-wrapper .header.ergonix-desktop-only,
.ergonix-wrapper .mobile-header.ergonix-mobile-only {
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
}

/* Mobile Announcement Bar */
.ergonix-wrapper .mobile-announcement-bar,
.ergonix-homepage-wrapper .mobile-announcement-bar {
    position: fixed;
    top: 0;
    top: env(safe-area-inset-top, 0); /* Handle device notches */
    left: 0;
    right: 0;
    background-color: #04AC9C;
    color: #FFFFFF;
    text-align: center;
    padding: 8px 10px;
    padding-top: max(8px, env(safe-area-inset-top, 8px));
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
    z-index: 999;
    font-family: 'Inter', -apple-system, sans-serif;
    transform: translateY(0);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}

/* Show mobile announcement bar only on mobile */
@media (min-width: 769px) {
    .ergonix-wrapper .mobile-announcement-bar,
    .ergonix-homepage-wrapper .mobile-announcement-bar {
        display: none;
    }
}

/* Hide state for announcement bar */
.ergonix-wrapper .mobile-announcement-bar.hidden,
.ergonix-homepage-wrapper .mobile-announcement-bar.hidden {
    transform: translateY(-100%);
}

/* Desktop Announcement Bar */
.ergonix-wrapper .desktop-announcement-bar,
.ergonix-homepage-wrapper .desktop-announcement-bar {
    background-color: #04AC9C;
    color: #FFFFFF;
    text-align: center;
    padding: 5px 20px !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    font-family: 'Inter', -apple-system, sans-serif;
    width: 100%;
    position: relative;
    z-index: 10;
    line-height: 1.3;
}

/* Hide desktop announcement bar on mobile */
@media (max-width: 768px) {
    .ergonix-wrapper .desktop-announcement-bar,
    .ergonix-homepage-wrapper .desktop-announcement-bar {
        display: none;
    }
}

.ergonix-wrapper .mobile-header-bar {
    background: white;
    border-radius: 40px;
    box-shadow: 1px 1px 20px 0px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px;
    width: 100%;
    box-sizing: border-box;
}

.ergonix-wrapper .mobile-logo-section {
    display: flex;
    flex-direction: column;
    gap: 0;
    height: auto;
    align-items: flex-start;
    justify-content: center;
    padding: 4px 8px 4px 12px;
    box-sizing: border-box;
    flex-shrink: 0;
    width: auto;
}

.ergonix-wrapper .mobile-logo {
    height: 38px;
    width: auto;
    flex-shrink: 0;
    display: block;
    max-width: none;
}

/* Clickable logo styles */
.ergonix-wrapper .mobile-logo-section a,
.ergonix-wrapper .logo a {
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.ergonix-wrapper .mobile-logo-section a:hover,
.ergonix-wrapper .logo a:hover {
    opacity: 0.8;
}

.ergonix-wrapper .mobile-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    flex-shrink: 0;
}

.ergonix-wrapper .mobile-menu-btn {
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #1a1a1a;
    flex-shrink: 0;
    padding: 0;
}

.ergonix-wrapper .mobile-cart-btn {
    width: 48px;
    height: 48px;
    border-radius: 50px;
    background: transparent;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #1a1a1a;
    flex-shrink: 0;
    padding: 14px;
    gap: 10px;
    box-sizing: border-box;
    overflow: hidden;
}

/* Ensure SVG icons maintain exact Figma sizes */
.ergonix-wrapper .mobile-menu-btn svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.ergonix-wrapper .mobile-cart-btn svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* FIGMA PIXEL-PERFECT MOBILE IMAGE SECTION */
.ergonix-mobile-only .mobile-image-section,
.ergonix-wrapper .mobile-image-section {
    position: relative;
    padding-top: 64px;  /* Changed from margin-top - optimal header clearance */
    /* Future-proof with safe area for notched devices */
    padding-top: max(64px, calc(44px + env(safe-area-inset-top)));
    padding-left: 16px;
    padding-right: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    background-color: rgba(243, 243, 243, 0.6);
}

/* Main Image Container - Responsive 398px minimum */
.ergonix-mobile-only .mobile-image-container,
.ergonix-wrapper .mobile-image-container {
    width: min(calc(100vw - 32px), 600px);
    max-width: 600px;
    min-width: min(398px, calc(100vw - 32px));
    min-height: 398px;
    aspect-ratio: 1/1;
    background: #f5f5f5;
    border-radius: 16px;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Prevent selection and enable touch gestures */
    user-select: none;
    -webkit-user-select: none;
    touch-action: pan-y pinch-zoom; /* Allow vertical scroll and zoom */
}

/* Main Product Image */
.ergonix-mobile-only .mobile-main-image,
.ergonix-wrapper .mobile-main-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    will-change: transform, opacity;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    touch-action: pan-y pinch-zoom;
    position: relative;
    z-index: 2;
    /* Smooth transition for variant switching */
    transition: opacity 0.2s ease;
}

/* Mobile image swipe animation classes */
.ergonix-wrapper .mobile-main-image.dragging {
    transition: none !important;
    cursor: grabbing;
    user-select: none;
}

.ergonix-wrapper .mobile-main-image.snapping {
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.2s ease-out !important;
}

/* Adjacent images for real-time reveal */
.ergonix-mobile-only .mobile-adjacent-image,
.ergonix-wrapper .mobile-adjacent-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Match main image zoom level - prevents zoom jump */
    object-position: center; /* Match main image positioning */
    will-change: transform, opacity;
    z-index: 1;
    pointer-events: none;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Loading Skeleton - REMOVED per user request */
.ergonix-mobile-only .mobile-image-skeleton,
.ergonix-wrapper .mobile-image-skeleton {
    display: none !important;
}

.ergonix-mobile-only .skeleton-shine,
.ergonix-wrapper .skeleton-shine {
    display: none !important;
}

/* Navigation Buttons - Figma Exact Specs */
.ergonix-mobile-only .mobile-nav-btn,
.ergonix-wrapper .mobile-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    background: #ffffffb3;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #1a1a1a;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
    z-index: 2;
    touch-action: manipulation;
}

/* Expanded tap target */
.ergonix-mobile-only .mobile-nav-btn::before,
.ergonix-wrapper .mobile-nav-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    border-radius: 50%;
}

.ergonix-mobile-only .mobile-nav-prev,
.ergonix-wrapper .mobile-nav-prev {
    left: 8px;
}

.ergonix-mobile-only .mobile-nav-next,
.ergonix-wrapper .mobile-nav-next {
    right: 16px;
}

.ergonix-mobile-only .mobile-nav-btn:hover,
.ergonix-wrapper .mobile-nav-btn:hover {
    background: rgba(255, 255, 255, 0.95);
    transform: translateY(-50%) scale(1.1);
}

.ergonix-mobile-only .mobile-nav-btn:active,
.ergonix-wrapper .mobile-nav-btn:active {
    transform: translateY(-50%) scale(0.9);
    background: rgba(255, 255, 255, 1);
}

.ergonix-mobile-only .mobile-nav-btn:focus,
.ergonix-wrapper .mobile-nav-btn:focus {
    outline: 2px solid #04ac9c;
    outline-offset: 2px;
}

.ergonix-mobile-only .mobile-nav-btn svg,
.ergonix-wrapper .mobile-nav-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    pointer-events: none;
}

/* Thumbnails Section - Figma Exact Specs */
.ergonix-mobile-only .mobile-thumbnails-section,
.ergonix-wrapper .mobile-thumbnails-section {
    width: 100%;
    margin-top: 6px;
}

.ergonix-mobile-only .mobile-thumbnails-scroll,
.ergonix-wrapper .mobile-thumbnails-scroll {
    width: 100%;
    overflow-x: auto;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.ergonix-mobile-only .mobile-thumbnails-scroll::-webkit-scrollbar,
.ergonix-wrapper .mobile-thumbnails-scroll::-webkit-scrollbar {
    display: none;
}

.ergonix-mobile-only .mobile-thumbnails-container,
.ergonix-wrapper .mobile-thumbnails-container {
    display: flex;
    gap: 4px;
    padding: 2px;
    min-width: min-content;
}

/* Individual Thumbnails - Figma Exact Specs */
.ergonix-mobile-only .mobile-thumbnail,
.ergonix-wrapper .mobile-thumbnail {
    height: 60px;
    width: 60px;
    min-width: 60px;
    flex: 0 0 auto;
    background: white;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s ease;
    touch-action: manipulation;
    position: relative;
}

.ergonix-mobile-only .mobile-thumbnail img,
.ergonix-wrapper .mobile-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Active thumbnail - no visual border */
.ergonix-mobile-only .mobile-thumbnail.active,
.ergonix-wrapper .mobile-thumbnail.active {
    /* Active state without visual border */
}

.ergonix-mobile-only .mobile-thumbnail:hover,
.ergonix-wrapper .mobile-thumbnail:hover {
    transform: scale(1.05);
    border-color: #04ac9c;
    opacity: 0.8;
}

.ergonix-mobile-only .mobile-thumbnail:active,
.ergonix-wrapper .mobile-thumbnail:active {
    transform: scale(0.95);
}

.ergonix-mobile-only .mobile-thumbnail:focus,
.ergonix-wrapper .mobile-thumbnail:focus {
    outline: 2px solid #04ac9c;
    outline-offset: 2px;
}

/* Equal width thumbnails when 5 or fewer */
.ergonix-mobile-only .mobile-thumbnails-container:has(.mobile-thumbnail:nth-child(-n+5):last-child) .mobile-thumbnail,
.ergonix-wrapper .mobile-thumbnails-container:has(.mobile-thumbnail:nth-child(-n+5):last-child) .mobile-thumbnail {
    flex: 1 0 0;
    min-width: 0;
}

/* Single image layout */
.ergonix-mobile-only .mobile-single-image,
.ergonix-wrapper .mobile-single-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Placeholder for no images */
.ergonix-mobile-only .placeholder-icon,
.ergonix-wrapper .placeholder-icon {
    opacity: 0.4;
}

/* Responsive adjustments */
@media (max-width: 375px) {
    .ergonix-wrapper .mobile-image-container {
        min-width: calc(100vw - 32px);
        width: calc(100vw - 32px);
        min-height: calc(100vw - 32px);
        aspect-ratio: 1/1;
    }
    
    .ergonix-wrapper .mobile-nav-btn {
        width: 26px;
        height: 26px;
    }
    
    .ergonix-mobile-only .mobile-nav-btn svg,
.ergonix-wrapper .mobile-nav-btn svg {
        width: 13px;
        height: 13px;
    }
    
    .ergonix-wrapper .mobile-thumbnail {
        height: 50px;
        min-width: 50px;
    }
}

/* Portrait orientation - maintain square aspect ratio */
@media (orientation: portrait) {
    .ergonix-wrapper .mobile-image-container {
        aspect-ratio: 1/1;
    }
}

/* Ensure minimum 398px with proper overflow handling */
@media (max-width: 430px) {
    .ergonix-wrapper .mobile-image-container {
        width: min(398px, calc(100vw - 32px));
        min-height: 398px;
        margin: 0 auto;
    }
    
    .ergonix-wrapper .mobile-image-section {
        overflow-x: hidden;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .ergonix-wrapper .mobile-nav-btn {
        box-shadow: 0 2px 16px rgba(0, 0, 0, 0.1);
    }
}

/* Mobile Pagination Dots - Overlay Style */
.ergonix-mobile-only .mobile-pagination-dots,
.ergonix-wrapper .mobile-pagination-dots {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 12px;
    z-index: 10;
    min-height: 6px;
}

.ergonix-mobile-only .pagination-dot,
.ergonix-wrapper .pagination-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.ergonix-mobile-only .pagination-dot.active,
.ergonix-wrapper .pagination-dot.active {
    background: rgba(255, 255, 255, 0.95);
    width: 18px;
    border-radius: 3px;
    transform: scale(1);
}

.ergonix-mobile-only .pagination-dot:hover:not(.active),
.ergonix-wrapper .pagination-dot:hover:not(.active) {
    background: rgba(255, 255, 255, 0.7);
    transform: scale(1.2);
}

/* Hide pagination dots on desktop */
@media (min-width: 769px) {
    .ergonix-mobile-only .mobile-pagination-dots,
    .ergonix-wrapper .mobile-pagination-dots {
        display: none;
    }
}

/* Mobile Product Details */
/* Font imports for pixel-perfect design */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@400;600;700&display=swap');

/* Mobile Product Details - Pixel Perfect from Figma */
.ergonix-wrapper .mobile-product-details {
  padding: 24px;
  width: 100%;
  max-width: 398px;
  margin: 10px auto 0 auto;
  background-color: #FFFFFF;
  border-radius: 24px;
}

/* Rating Section */
.ergonix-wrapper .mobile-rating-row {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-bottom: 18px;
}

.ergonix-wrapper .mobile-stars-container {
  display: flex;
  align-items: center;
  gap: 0;
}

.ergonix-wrapper .mobile-rating-text {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: #1a1a1a;
  margin-left: 2px;
}

.ergonix-wrapper .mobile-reviews-text {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(26, 26, 26, 0.5);
}

/* Title Section */
.ergonix-wrapper .mobile-title-section {
  margin-bottom: 12px;
}

.ergonix-wrapper .mobile-product-title {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.48px;
  color: #1a1a1a;
  margin: 0;
  padding: 0;
  text-indent: 0;
  margin-block-start: 0;
  margin-inline-start: 0;
}

.ergonix-wrapper .mobile-product-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0;
}

/* Price Section */
.ergonix-wrapper .mobile-price-wrapper {
  margin-bottom: 18px;
}

.ergonix-wrapper .mobile-price-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.ergonix-wrapper .mobile-price-current {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  color: #04AC9C;
}

.ergonix-wrapper .mobile-price-original {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #8c8484;
  text-decoration: line-through;
}

.ergonix-wrapper .mobile-discount-badge {
  background: #04AC9C;
  border-radius: 4px;
  padding: 2px 6px;
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 12px;
  line-height: 1.4;
  color: white;
}

.ergonix-wrapper .mobile-vat-text {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: rgba(26, 26, 26, 0.5);
}

/* Features Card */
.ergonix-wrapper .mobile-features-card {
  background: rgba(243, 243, 243, 0.6);
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  position: relative;
  z-index: 1;
}

.ergonix-wrapper .mobile-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ergonix-wrapper .mobile-feature-item span {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: #1a1a1a;
  text-transform: capitalize;
}

/* Desktop Features Card */
.ergonix-wrapper .desktop-features-card {
  background: #F3F3F3;
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  position: relative;
  z-index: 1;
}

.ergonix-wrapper .desktop-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ergonix-wrapper .desktop-feature-item span {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: #1a1a1a;
}

/* Desktop Guarantees Card */
.ergonix-wrapper .desktop-guarantees-card {
  background: rgba(243, 243, 243, 0.6);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}

.ergonix-wrapper .desktop-guarantee-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ergonix-wrapper .desktop-guarantee-item span {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: #1a1a1a;
}

/* Desktop Timeline */
.ergonix-wrapper .desktop-timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin: 40px 0 16px 0;
  background-color: rgba(243, 243, 243, 0.2);
}

.ergonix-wrapper .desktop-timeline .timeline-line {
  position: absolute;
  top: 23px;
  left: 60px;
  right: 60px;
  width: calc(100% - 120px);
}

.ergonix-wrapper .desktop-timeline .timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 75px;
  z-index: 1;
}

.ergonix-wrapper .desktop-timeline .timeline-item:nth-child(3) {
  width: 70px;
}

.ergonix-wrapper .desktop-timeline .timeline-item:last-child {
  width: 90px;
}

.ergonix-wrapper .desktop-timeline .timeline-icon {
  width: 42px;
  height: 42px;
  border-radius: 42px;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ergonix-wrapper .desktop-timeline .timeline-icon.active {
  background: #1a1a1a;
}

.ergonix-wrapper .desktop-timeline .timeline-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ergonix-wrapper .desktop-timeline .timeline-date {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: #1a1a1a;
  line-height: 1.4;
  margin: 0;
}

.ergonix-wrapper .desktop-timeline .timeline-label {
  font-family: 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: rgba(26, 26, 26, 0.5);
  line-height: 1.4;
  text-align: center;
  margin: 0;
}

/* Color Section */
.ergonix-wrapper .mobile-color-section {
  margin-bottom: 18px;
}

.ergonix-wrapper .mobile-color-label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 1.4;
  color: #1a1a1a;
  margin-bottom: 6px;
}

.ergonix-wrapper .mobile-color-label strong {
  font-weight: 700;
}

.ergonix-wrapper .mobile-color-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  height: 32px;
}

.ergonix-wrapper .mobile-color-option {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}

.ergonix-wrapper .mobile-color-option.color-grey {
  background: #C4C4C4;
}

.ergonix-wrapper .mobile-color-option.color-black {
  background: #000000;
}

.ergonix-wrapper .mobile-color-option.active {
  box-shadow: 0 0 0 2px #1a1a1a;
}

/* Divider */
.ergonix-wrapper .mobile-divider {
  height: 1px;
  background: #E0E0E0;
  margin: 18px 0;
}

/* Customer Stories */
.ergonix-wrapper .mobile-stories {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  gap: 2.25px;
}

.ergonix-wrapper .mobile-story-user {
  width: 56px;
  height: 56px;
  position: relative;
}

.ergonix-wrapper .mobile-avatar {
  position: relative;
  width: 56px;
  height: 56px;
}

.ergonix-wrapper .avatar-placeholder {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  position: absolute;
  top: 5px;
  left: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  color: white;
  border: 0.389px solid #dddddd;
}

.ergonix-wrapper .avatar-placeholder.avatar-1 {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.ergonix-wrapper .avatar-placeholder.avatar-2 {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.ergonix-wrapper .avatar-placeholder.avatar-3 {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.ergonix-wrapper .avatar-placeholder.avatar-4 {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.ergonix-wrapper .avatar-placeholder.avatar-5 {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.ergonix-wrapper .story-ring {
  position: absolute;
  top: 0;
  left: 0;
}

/* Stock Section */
.ergonix-wrapper .mobile-stock-section {
  margin-bottom: 18px;
}

.ergonix-wrapper .mobile-stock-label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  color: #f9373f;
  margin-bottom: 8px;
}

.ergonix-wrapper .mobile-stock-bar {
  width: 100%;
  height: 8px;
  background: #f3f3f3;
  border-radius: 1000px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(26, 26, 26, 0.03);
}

.ergonix-wrapper .mobile-stock-progress {
  width: 79px;
  height: 8px;
  background: linear-gradient(90deg, rgba(249, 55, 63, 0.5) 0%, #f9373f 100%);
  border-radius: 100px;
  box-shadow: 5px 0px 6px 0px rgba(249, 55, 63, 0.15);
}

/* Order Button */
.ergonix-wrapper .mobile-cart-form {
  margin-bottom: 16px;
}

.ergonix-wrapper .mobile-order-button {
  width: 100%;
  height: 58px;
  background: #04ac9c;
  border-radius: 50px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 40px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.ergonix-wrapper .mobile-order-button span {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: white;
}

.ergonix-wrapper .mobile-order-button:hover:not(:disabled) {
  background: #038b7d;
}

.ergonix-wrapper .mobile-order-button:disabled {
  background: #cccccc;
  cursor: not-allowed;
}

/* Guarantees Card */
.ergonix-wrapper .mobile-guarantees-card {
  background: rgba(243, 243, 243, 0.6);
  border-radius: 12px;
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0 24px 0;
}

.ergonix-wrapper .mobile-guarantee-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ergonix-wrapper .mobile-guarantee-item span {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  color: #1a1a1a;
  text-transform: capitalize;
}

/* Timeline */
.ergonix-wrapper .mobile-timeline {
  position: relative;
  display: flex;
  justify-content: space-between;
  padding: 0;
  margin-bottom: 24px;
  background-color: rgba(243, 243, 243, 0.2);
}

.ergonix-wrapper .timeline-line {
  position: absolute;
  top: 23px;
  left: 45px;
  width: 217px;
}

.ergonix-wrapper .timeline-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 75px;
  z-index: 1;
}

.ergonix-wrapper .timeline-item:nth-child(3) {
  width: 70px;
}

.ergonix-wrapper .timeline-item:last-child {
  width: 90px;
}

.ergonix-wrapper .timeline-icon {
  width: 42px;
  height: 42px;
  border-radius: 42px;
  background: #1a1a1a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ergonix-wrapper .timeline-icon.active {
  background: #1a1a1a;
}

.ergonix-wrapper .timeline-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.ergonix-wrapper .timeline-date {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 1.4;
  color: #1a1a1a;
  text-transform: capitalize;
}

.ergonix-wrapper .timeline-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 10px;
  line-height: 1.4;
  color: rgba(26, 26, 26, 0.5);
  text-transform: capitalize;
}


/* Additional Responsive Breakpoints */
@media (max-width: 428px) {
    .ergonix-wrapper .mobile-product-title {
        font-size: 24px;
    }
    
    .ergonix-wrapper .mobile-current-price {
        font-size: 28px;
    }
}

@media (max-width: 390px) {
    .ergonix-wrapper .mobile-nav {
        padding: 12px 16px;
    }
    
    .ergonix-wrapper .mobile-product-details {
        padding: 20px 16px;
    }
    
    .ergonix-wrapper .mobile-image-section {
        padding: 0 16px;
    }
    
}

@media (max-width: 375px) {
    .ergonix-wrapper .mobile-product-title {
        font-size: 22px;
    }
    
    .ergonix-wrapper .mobile-current-price {
        font-size: 26px;
    }
    
    .ergonix-wrapper .mobile-features {
        gap: 12px;
    }
    
    .ergonix-wrapper .mobile-addon-section {
        padding: 12px;
    }
}

/* Hide default Shopify Dawn theme header and announcement bar */
.shopify-section-group-header-group,
#shopify-section-header,
.announcement-bar,
sticky-header,
.header-wrapper,
.section-header,
.shopify-section-header,
.shopify-section-announcement-bar,
#MainContent > .shopify-section:first-child .header,
[id^="shopify-section-header"] {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Mobile Header Responsive Styles */
@media (max-width: 768px) {
  /* Hide desktop header on mobile */
  .ergonix-wrapper .header,
  .ergonix-wrapper > .header {
    display: none !important;
  }
  
  /* Removed old mobile header styles - now using pixel-perfect Figma implementation */
  
    
    /* Update image section spacing */
    .ergonix-wrapper .mobile-image-section {
      padding-top: 100px; /* 36px announcement + 56px header + spacing */
      padding-top: max(100px, calc(80px + env(safe-area-inset-top, 0)));
    }
  }
  
  /* Documentation: Previously 166px gap (80px wrapper + 86px margin), now 64px gap
     Saves 102px vertical space - product images now visible immediately on load
     Header clearance: fixed at 20px + 44px visible portion = 64px perfect alignment */
}

@media (min-width: 769px) {
  /* Mobile header is already hidden via .ergonix-mobile-only class */
}

/* Global resets for ergonix wrapper */
.ergonix-wrapper * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.ergonix-wrapper {
    font-family: 'Inter', sans-serif !important;
    color: #1a1a1a !important;
    position: relative !important;
}

/* Product page specific background */
.template-product .ergonix-wrapper {
    background: #F3F3F3 !important;
    min-height: 100vh !important;
}

/* Only apply gray background to the product hero section */
.ergonix-desktop-only.product-hero-wrapper {
    background-color: var(--ergonix-bg-main) !important;
    padding-bottom: 40px; /* Add space between hero and next section */
}

/* Override the gray background ONLY for the header */
.ergonix-wrapper .header.ergonix-desktop-only {
    background: white !important;
    background-color: white !important;
}

/* Fix announcement bar color - override the gray background */
.ergonix-wrapper .desktop-announcement-bar.ergonix-desktop-only,
.ergonix-homepage-wrapper .desktop-announcement-bar.ergonix-desktop-only {
    background-color: #04AC9C !important;
    color: #FFFFFF !important;
}

/* =========================== */
/* COMPARISON TABLE STYLES */
/* =========================== */

.ergonix-comparison {
  width: 100%;
  padding: 80px 56px;
  background: #fafafa;
  display: flex;
  justify-content: center;
}

.ergonix-comparison .comparison-container {
  max-width: 1328px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 49px;
}

/* Section Header */
.ergonix-comparison .comparison-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 589px;
  text-align: center;
}

.ergonix-comparison .comparison-title {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 48px;
  line-height: 1.1;
  letter-spacing: -0.96px;
  color: #1a1a1a;
  margin: 0;
}

.ergonix-comparison .comparison-subtitle {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0;
  width: 360px;
}

/* Comparison Table */
.ergonix-comparison .comparison-table {
  display: flex;
  gap: 8px;
  width: 100%;
  align-items: flex-start;
  justify-content: center;
}

/* Feature Categories Column */
.ergonix-comparison .features-column {
  width: 250px;
}

.ergonix-comparison .feature-header {
  height: 105px;
  opacity: 0;
  border-bottom: 1px dashed #c4c4c4;
}

.ergonix-comparison .feature-row {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  border-bottom: 1px dashed #c4c4c4;
  position: relative;
}

.ergonix-comparison .feature-icon {
  width: 40px;
  height: 40px;
  background: white;
  border-radius: 100px;
  box-shadow: 3px 3px 6.7px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ergonix-comparison .feature-label {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 21.98px;
  color: #19191c;
}

/* Column Base Styles */
.ergonix-comparison .ergonix-column,
.ergonix-comparison .competitor-column {
  width: 295px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.ergonix-comparison .column-header {
  height: 105px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  position: relative;
}

/* Ergonix Column Special Styling */
.ergonix-comparison .ergonix-column {
  background: white;
  border: 1px solid rgba(4, 172, 156, 0.5);
  box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: visible;
  align-items: stretch;
}

.ergonix-comparison .ergonix-badge {
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  color: white;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  padding: 14px 21px;
  border-radius: 20px;
  border: 1px solid rgba(4, 172, 156, 0.5);
  white-space: nowrap;
  z-index: 10;
}

.ergonix-comparison .ergonix-logo {
  display: block;
  margin: 20px auto 0;
  width: 127px;
  height: 40px;
  object-fit: contain;
}

.ergonix-comparison .ergonix-feature {
  background: white;
  padding: 0 30px;
  justify-content: flex-start !important;
  align-items: center !important;
}

.ergonix-comparison .feature-check {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
}

.ergonix-comparison .feature-check img {
  width: 14px;
  height: 14px;
  display: block;
  margin: 0;
  padding: 0;
}

.ergonix-comparison .feature-text {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 21.98px;
  color: #19191c;
  text-align: left !important;
  flex: 1;
  margin: 0;
  padding: 0;
}

/* Competitor Columns */
.ergonix-comparison .competitor-column {
  background: rgba(243, 243, 243, 0.5);
}

.ergonix-comparison .competitor-header {
  background: rgba(243, 243, 243, 0.5);
}

.ergonix-comparison .competitor-title {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: #19191c;
  text-align: center;
}

.ergonix-comparison .competitor-feature {
  background: rgba(243, 243, 243, 0.5);
  padding: 0 30px;
}

.ergonix-comparison .feature-cross {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.ergonix-comparison .competitor-text {
  color: #897e7e;
}

/* Ergonix Footer with Rating and CTA */
.ergonix-comparison .ergonix-footer {
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  background: white;
}

.ergonix-comparison .rating {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ergonix-comparison .rating-value {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 15.36px;
  color: #19191c;
  letter-spacing: -0.15px;
}

.ergonix-comparison .add-to-cart-btn {
  background: #04ac9c;
  border-radius: 50px;
  padding: 12px 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: all 0.3s ease;
  max-width: 137px;
}

.ergonix-comparison .add-to-cart-btn span {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  color: white;
}

.ergonix-comparison .add-to-cart-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(4, 172, 156, 0.3);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .ergonix-comparison {
    padding: 60px 32px;
  }

  .ergonix-comparison .comparison-header {
    width: 100%;
  }

  .ergonix-comparison .comparison-title {
    font-size: 40px;
  }

  .ergonix-comparison .comparison-table {
    flex-direction: column;
    gap: 24px;
  }

  .ergonix-comparison .features-column,
  .ergonix-comparison .ergonix-column,
  .ergonix-comparison .competitor-column {
    width: 100%;
  }

  .ergonix-comparison .feature-row {
    height: 80px;
  }

  .ergonix-comparison .column-header {
    height: 80px;
  }
}

@media (max-width: 768px) {
  .ergonix-comparison {
    padding: 40px 20px;
  }

  .ergonix-comparison .comparison-title {
    font-size: 32px;
  }

  .ergonix-comparison .comparison-subtitle {
    width: 100%;
  }

  .ergonix-comparison .feature-label {
    font-size: 16px;
  }

  .ergonix-comparison .feature-text {
    font-size: 13px;
  }
}

/* Hide comparison section on mobile */
@media (max-width: 768px) {
  .ergonix-comparison {
    display: none !important;
  }
}

/* Loading Animation Keyframes */
@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* Loading Spinner */
.loading-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spinner 0.8s linear infinite;
    display: inline-block;
    margin-left: 8px;
}

/* Button Loading States */
.ergonix-wrapper .order-btn.loading,
.ergonix-wrapper .mobile-order-button.loading,
.ergonix-wrapper .sticky-order-btn.loading,
.ergonix-wrapper .desktop-sticky-checkout-btn.loading {
    pointer-events: none;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ergonix-wrapper .order-btn.loading::after,
.ergonix-wrapper .mobile-order-button.loading::after,
.ergonix-wrapper .sticky-order-btn.loading::after,
.ergonix-wrapper .desktop-sticky-checkout-btn.loading::after {
    content: "";
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top: 2px solid white;
    border-radius: 50%;
    animation: spinner 0.8s linear infinite;
    margin-left: 8px;
}



/* Ensure Ergonix body styles */
body.ergonix-body,
body:has(.ergonix-wrapper) {
    margin: 0 !important;
    padding: 0 !important;
    background: white !important;
}

/* Top Banner */
.ergonix-wrapper .top-banner {
    background-color: #04ac9c;
    color: white;
    text-align: center;
    padding: 6px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Header */
.ergonix-wrapper .header {
    position: absolute;
    top: 36px;
    left: 56px;
    right: 56px;
    background: white;
    border-radius: 40px;
    padding: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 1px 4px 20px rgba(0, 0, 0, 0.15);
    z-index: 100;
    
}

.ergonix-wrapper .logo-container {
    padding: 6px 0 0 20px;
    width: 192px;
}

.ergonix-wrapper .logo {
    width: 103.57px;
    height: 32.62px;
}

.ergonix-wrapper .logo svg {
    width: 100%;
    height: 100%;
}

.ergonix-wrapper .nav-menu {
    display: flex;
    gap: 8px;
    padding-left: 12px;
}

.ergonix-wrapper .nav-link {
    padding: 10px 14px;
    text-decoration: none;
    color: #1a1a1a;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s;
    border-radius: 8px;
}

.ergonix-wrapper .nav-link:hover {
    background: rgba(4, 172, 156, 0.1);
    color: #04ac9c;
}

.ergonix-wrapper .header-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}

.ergonix-wrapper .language-btn {
    background: white;
    border: none;
    padding: 9px 12px;
    border-radius: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: all 0.3s;
}

.ergonix-wrapper .language-btn:hover {
    background: #f9f9f9;
}

.ergonix-wrapper .cart-btn {
    background: #04ac9c;
    color: white;
    border: none;
    padding: 14px 30px;
    border-radius: 50px;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s;
}

.ergonix-wrapper .cart-btn:hover {
    background: #03998a;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(4, 172, 156, 0.3);
}

/* Main Layout */
.ergonix-wrapper .main-container {
    display: grid;
    grid-template-columns: 76px 750px 1fr;
    gap: 40px;
    align-items: start;
    padding-top: 134px; /* Space for header */
    padding-bottom: 30px; /* Space at bottom to prevent cutoff */
    padding-left: 120px;
    padding-right: 120px;
    max-width: 1600px;
    margin: 0 auto;
    background-color: #F3F3F3;
}

/* Desktop Sticky Gallery */
@media (min-width: 769px) {
    .ergonix-wrapper .thumbnails-section {
        position: sticky !important;
        top: 20px !important; /* Optimized gap */
        align-self: flex-start;
        transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        z-index: 10;
        will-change: transform, position;
    }

    .ergonix-wrapper .main-image-section {
        position: sticky !important;
        top: 20px !important; /* Optimized gap */
        align-self: flex-start;
        transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
        z-index: 10;
        will-change: transform, position;
    }
    
    /* Smooth animation for sticky to relative position change */
    .ergonix-wrapper .thumbnails-section.transitioning,
    .ergonix-wrapper .main-image-section.transitioning {
        transition: all 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
    }
    
    /* Add subtle shadow when sticky for visual depth */
    .ergonix-wrapper .thumbnails-section:not([style*="position: relative"]),
    .ergonix-wrapper .main-image-section:not([style*="position: relative"]) {
        filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.04));
    }
    
    /* Optimize scroll performance */
    .ergonix-wrapper .thumbnails-section,
    .ergonix-wrapper .main-image-section {
        transform: translateZ(0); /* Force hardware acceleration */
        backface-visibility: hidden;
    }
}

/* Thumbnails */
.ergonix-wrapper .thumbnails-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ergonix-wrapper .thumbnails-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ergonix-wrapper .thumbnail {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.ergonix-wrapper .thumbnail:hover {
    transform: scale(1.05);
    border-color: var(--ergonix-primary);
}

.ergonix-wrapper .thumbnail.active {
    border-color: var(--ergonix-primary);
}

.ergonix-wrapper .divider-line {
    width: 60px;
    height: 1px;
    background: var(--ergonix-border);
    margin: 5px 0;
}

.ergonix-wrapper .view-360 {
    width: 60px;
    height: 60px;
    background: white;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    border: 2px solid #e5e5e5;
}

.ergonix-wrapper .view-360:hover {
    border-color: #04ac9c;
    transform: scale(1.05);
}

.ergonix-wrapper .view-360-text {
    font-size: 14px;
    color: #1a1a1a;
}

/* Main Image */
.ergonix-wrapper .main-image-section {
    width: 750px;
    height: 750px;
    aspect-ratio: 1 / 1;
    background: #f5f5f5;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
}

/* Fallback for browsers without aspect-ratio support */
@supports not (aspect-ratio: 1 / 1) {
    .ergonix-wrapper .main-image-section::before {
        content: "";
        display: block;
        padding-top: 100%; /* 1:1 square */
    }
    .ergonix-wrapper .main-image-section {
        position: relative;
    }
    .ergonix-wrapper .main-image-section > img {
        position: absolute;
        inset: 0;
    }
}

.ergonix-wrapper .main-product-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    padding: 0;
    /* Prevent blue focus outline on rapid clicks */
    outline: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    pointer-events: none;
    /* Smooth transition for variant switching */
    transition: opacity 0.2s ease;
}

.ergonix-wrapper .image-nav-container {
    position: absolute;
    bottom: 34px;
    right: 34px;
    display: flex;
    gap: 8px;
}

.ergonix-wrapper .image-nav {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ergonix-wrapper .image-nav:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.ergonix-wrapper .image-nav.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Product Info Section */
.ergonix-wrapper .product-info-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ergonix-wrapper .product-card {
    background: var(--ergonix-card-bg);
    border-radius: var(--ergonix-card-radius);
    padding: var(--ergonix-card-padding);
    width: 448px;
}

.ergonix-wrapper .breadcrumb {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 32px;
}

.ergonix-wrapper .breadcrumb-text {
    font-size: 14px;
    color: #b1acac;
    font-weight: 400;
    line-height: 1.4;
}

.ergonix-wrapper .breadcrumb-text span {
    color: #1a1a1a;
    font-weight: 500;
}

.ergonix-wrapper .rating-container {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ergonix-wrapper .stars {
    display: flex;
    gap: 3px;
}

.ergonix-wrapper .star {
    width: 16px;
    height: 16px;
    color: #FFA500;
}

.ergonix-wrapper .rating-text {
    font-size: 14px;
    color: #1a1a1a;
    margin-left: 4px;
    font-weight: 500;
}

.ergonix-wrapper .reviews-count {
    font-size: 14px;
    color: rgba(26, 26, 26, 0.5);
}

.ergonix-wrapper .product-title {
    font-family: 'Sora', sans-serif;
    font-size: 40px;
    font-weight: 600;
    letter-spacing: -0.8px;
    margin-bottom: 8px;
    line-height: 1.1;
}

.ergonix-wrapper .product-description {
    font-size: 16px;
    color: #1a1a1a;
    margin-bottom: 24px;
    line-height: 1.4;
}

.ergonix-wrapper .price-section {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
}

.ergonix-wrapper .current-price {
    font-size: 24px;
    font-weight: 600;
    color: #04AC9C;
}

.ergonix-wrapper .original-price {
    font-size: 16px;
    color: #8c8484;
    text-decoration: line-through;
}

.ergonix-wrapper .discount-badge {
    background: var(--ergonix-primary);
    color: var(--ergonix-bg-surface);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
}

.ergonix-wrapper .features-box {
    background: rgba(243, 243, 243, 0.6);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 24px;
}

.ergonix-wrapper .feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.ergonix-wrapper .feature-item:last-child {
    margin-bottom: 0;
}

.ergonix-wrapper .feature-icon {
    width: 20px;
    height: 20px;
}

.ergonix-wrapper .feature-text {
    font-size: 12px;
    font-weight: 500;
}

.ergonix-wrapper .color-section {
    margin-bottom: 24px;
}

.ergonix-wrapper .color-label {
    font-size: 14px;
    margin-bottom: 6px;
}

.ergonix-wrapper .color-label strong {
    font-weight: 700;
}

.ergonix-wrapper .color-options {
    display: flex;
    gap: 6px;
}

.ergonix-wrapper .color-option {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

/* Desktop product page color selection animation - ULTRA SPECIFIC to prevent conflicts */
.ergonix-wrapper .product-card .color-section .color-options .color-option.active {
    box-shadow: 0 0 0 2px var(--ergonix-primary);
}

.ergonix-wrapper .addon-section {
    background: rgba(243, 243, 243, 0.6);
    border-radius: 8px;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    cursor: pointer;
    transition: all 0.3s;
}

.ergonix-wrapper .addon-section:hover {
    background: #e8e8e8;
}

.ergonix-wrapper .addon-checkbox {
    width: 18px;
    height: 18px;
    border: 1px solid #04ac9c;
    border-radius: 4px;
    background: white;
}

.ergonix-wrapper .addon-image {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
}

.ergonix-wrapper .addon-info {
    flex: 1;
}

.ergonix-wrapper .addon-title {
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: capitalize;
    margin-bottom: 2px;
}

.ergonix-wrapper .addon-rating {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
}

.ergonix-wrapper .addon-price {
    text-align: right;
}

.ergonix-wrapper .addon-current-price {
    font-size: 14px;
    font-weight: 600;
}

.ergonix-wrapper .addon-original-price {
    font-size: 14px;
    color: #8c8484;
    text-decoration: line-through;
}

.ergonix-wrapper .customer-photos {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
    margin-left: -4px;
}

.ergonix-wrapper .customer-photo {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid white;
    margin-left: -8px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s;
}

.ergonix-wrapper .customer-photo:first-child {
    margin-left: 0;
}

.ergonix-wrapper .customer-photo:hover {
    transform: scale(1.1);
    z-index: 10;
}

.ergonix-wrapper .stock-section {
    margin-bottom: 24px;
}

.ergonix-wrapper .stock-label {
    font-size: 14px;
    color: #f9373f;
    margin-bottom: 12px;
}

.ergonix-wrapper .stock-bar {
    height: 8px;
    background: rgba(243, 243, 243, 0.6);
    border-radius: 1000px;
    overflow: hidden;
    border: 1px solid rgba(26, 26, 26, 0.03);
}

.ergonix-wrapper .stock-fill {
    height: 100%;
    width: 79px;
    background: var(--ergonix-danger-gradient);
    border-radius: 100px;
    box-shadow: 5px 0 6px rgba(249, 55, 63, 0.15);
}

.ergonix-wrapper .order-btn {
    width: 100%;
    height: 56px;
    background: var(--ergonix-primary);
    color: var(--ergonix-bg-surface);
    border: none;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 16px;
}

.ergonix-wrapper .order-btn:hover {
    background: var(--ergonix-primary-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(4, 172, 156, 0.3);
}

.ergonix-wrapper .shipping-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #04ac9c;
    margin-bottom: 32px;
}

.ergonix-wrapper .guarantees-card {
    background: white;
    border-radius: 12px;
    padding: 16px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 448px;
}

.ergonix-wrapper .guarantee-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

.ergonix-wrapper .guarantee-divider {
    color: #b1acac;
    font-size: 12px;
}


.ergonix-wrapper .info-card {
    background: var(--ergonix-card-bg);
    border-radius: var(--ergonix-card-radius);
    padding: var(--ergonix-card-padding);
    width: 448px;
}

.ergonix-wrapper .info-section {
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

.ergonix-wrapper .info-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.ergonix-wrapper .info-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0;
}

.ergonix-wrapper .info-title {
    font-size: 14px;
    color: #1a1a1a;
}

.ergonix-wrapper .info-toggle {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s;
}

.ergonix-wrapper .info-content {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(26, 26, 26, 0.7);
    line-height: 1.4;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.ergonix-wrapper .info-content.active {
    max-height: 100px;
}

/* Icons */
.ergonix-wrapper .icon-star {
    fill: #FFA500;
}

.ergonix-wrapper .icon {
    width: 20px;
    height: 20px;
}

/* Fix parent overflow for full-width sections */
body {
    overflow-x: hidden !important;
}

/* Remove gray background from wrapper when video section is present */
.template-product .ergonix-wrapper:has(.video-section-wrapper) {
    background: transparent !important;
}

/* Fallback for browsers without :has() support */
.template-product .ergonix-wrapper-video-section {
    background: #FFFFFF !important;
}

/* Video Section Wrapper - Full white background with multiple techniques */
.ergonix-wrapper .video-section-wrapper {
    position: relative;
    background: #FFFFFF !important;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    padding: 80px calc(50vw - 50%) 0 calc(50vw - 50%);
    /* Box shadow technique for full width background */
    box-shadow: 0 0 0 100vmax #FFFFFF;
    /* Ensure it's above other elements */
    z-index: 1;
}

/* Pseudo elements for extended white background */
.ergonix-wrapper .video-section-wrapper::before,
.ergonix-wrapper .video-section-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200vw;
    background: #FFFFFF !important;
    z-index: -1;
}

.ergonix-wrapper .video-section-wrapper::before {
    right: 100%;
}

.ergonix-wrapper .video-section-wrapper::after {
    left: 100%;
}

/* Alternative approach using outline for browsers that support it */
.ergonix-wrapper .video-section-wrapper {
    outline: 100vmax solid #FFFFFF;
    outline-offset: 0;
    clip-path: inset(0 -100vmax);
}

/* Video Section */
.ergonix-wrapper .video-section {
    max-width: 1440px;
    margin: 80px auto 0;
    padding: 60px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    background: #FFFFFF;
}

.ergonix-wrapper .video-content {
    text-align: center;
    max-width: 713px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.ergonix-wrapper .video-title {
    font-family: 'Sora', sans-serif;
    font-size: 48px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.96px;
    line-height: 1.1;
    margin: 0;
}

.ergonix-wrapper .video-description {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.4;
    max-width: 428px;
    margin: 0;
}

.ergonix-wrapper .video-container {
    width: 100%;
    max-width: 1320px;
    height: 720px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.15);
}

.ergonix-wrapper .product-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Features Section */
.ergonix-wrapper .features-section {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 60px 80px 60px;
    display: flex;
    gap: 32px;
    align-items: stretch;
    justify-content: center;
}

.ergonix-wrapper .feature-card {
    flex: 1;
    background: #f2ebeb;
    border-radius: 12px;
    padding: 16px 32px 20px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 120px;
    justify-content: center;
}

.ergonix-wrapper .feature-icon-large {
    width: 48px;
    height: 48px;
    margin-bottom: 0;
}

.ergonix-wrapper .feature-number {
    font-family: 'Sora', sans-serif;
    font-size: 40px;
    font-weight: 300;
    color: #897e7e;
    line-height: 1.3;
    letter-spacing: -1.6px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ergonix-wrapper .feature-card .feature-title {
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #19191c;
    text-align: center;
    line-height: 1.3;
    margin: 0;
    white-space: nowrap;
}

/* Say Goodbye Section */
.ergonix-wrapper .goodbye-section {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px 100px 60px;
}

.ergonix-wrapper .goodbye-container {
    background: #f9f9f9;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    min-height: 600px;
}

.ergonix-wrapper .goodbye-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 536px;
    z-index: 1;
}

.ergonix-wrapper .goodbye-title {
    font-family: 'Sora', sans-serif;
    font-size: 56px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.1;
    letter-spacing: -1.12px;
    margin: 0;
}

.ergonix-wrapper .goodbye-description {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.4;
    max-width: 478px;
    margin: 0;
}

.ergonix-wrapper .goodbye-image {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 55%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}

.ergonix-wrapper .chair-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom right;
}

.ergonix-wrapper .goodbye-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.ergonix-wrapper .goodbye-background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* Dynamic Backrest Section */
.ergonix-wrapper .dynamic-backrest-section {
    max-width: 1440px;
    margin: 0 auto;
    padding: 60px 60px 40px 60px;
}

.ergonix-wrapper .dynamic-backrest-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align: center;
}

.ergonix-wrapper .dynamic-backrest-title {
    font-family: 'Sora', sans-serif;
    font-size: 56px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.1;
    letter-spacing: -1.12px;
}

.ergonix-wrapper .dynamic-backrest-description {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.4;
    max-width: 556px;
}

/* Chair Showcase Section */
.ergonix-wrapper .chair-showcase-section {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px 100px 60px;
}

.ergonix-wrapper .chair-showcase-container {
    position: relative;
    width: 100%;
    height: 716px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e5e5;
}

.ergonix-wrapper .showcase-media-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ergonix-wrapper .showcase-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ergonix-wrapper .showcase-text-card {
    position: absolute;
    bottom: 40px;
    right: 40px;
    background: white;
    border: 1px solid #e3e1e1;
    border-radius: 8px;
    padding: 40px;
    width: 480px;
}

.ergonix-wrapper .showcase-title {
    font-family: 'Sora', sans-serif;
    font-size: 46px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.1;
    letter-spacing: -0.92px;
}

/* Adjustments Section */
.ergonix-wrapper .adjustments-section {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 60px 100px 60px;
    display: flex;
    gap: 20px;
    align-items: stretch;
    background-color: white !important;
}

.ergonix-wrapper .adjustment-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ergonix-wrapper .adjustment-video-container {
    height: 450px;
    aspect-ratio: 1 / 1.04;
    background: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    position: relative;
}

.ergonix-wrapper .adjustment-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ergonix-wrapper .adjustment-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ergonix-wrapper .adjustment-title {
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.1;
    letter-spacing: -0.48px;
    margin: 0;
}

.ergonix-wrapper .adjustment-description {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #716666;
    line-height: 1.4;
    margin: 0;
}

/* Relief Section Styles */
.ergonix-wrapper .relief-section {
    max-width: 1440px;
    margin: 80px auto 60px; /* Added bottom margin to accommodate extending pressure card */
    padding: 0 56px;
}

.ergonix-wrapper .relief-header {
    text-align: center;
    margin-bottom: 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.ergonix-wrapper .relief-title {
    font-family: 'Sora', sans-serif;
    font-size: 56px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -1.12px;
    line-height: 1.1;
    margin: 0;
}

.ergonix-wrapper .relief-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.4;
    max-width: 556px;
    margin: 0;
    text-align: center;
}

.ergonix-wrapper .relief-content {
    display: flex;
    gap: 20px;
    align-items: stretch;
}

/* Left side - Visualization */
.ergonix-wrapper .relief-visualization {
    flex: 0 0 820px;
    height: 720px;
    background: rgba(243, 243, 243, 0.6);
    border-radius: 12px;
    padding: 32px;
    display: flex;
    align-items: flex-end;
    position: relative;
    overflow: visible; /* Changed to visible to allow pressure card to extend outside */
}

.ergonix-wrapper .chair-heatmap-placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 12px; /* Match parent container radius */
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e5e5;
}

/* Desktop Pressure Overlay Card */
.ergonix-wrapper .desktop-pressure-card {
    position: absolute;
    bottom: 10px; /* Positioned to overlap the bottom edge of container */
    left: 50%;
    transform: translateX(-50%);
    width: 320px;
    height: 103px;
    background: white;
    border: 1px solid #e3e1e1;
    border-radius: 8px;
    padding: 0;
    z-index: 3;
}

.ergonix-wrapper .desktop-pressure-card .pressure-card-title {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    color: #1a1a1a;
}

.ergonix-wrapper .desktop-pressure-card .pressure-gradient-container {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 48px;
    height: 26px;
}

.ergonix-wrapper .desktop-pressure-card .pressure-gradient-bg {
    position: relative;
    width: 100%;
    height: 26px;
    background: #f3f3f3;
    border-radius: 1000px;
    border: 1px solid rgba(26, 26, 26, 0.03);
    overflow: hidden;
}

.ergonix-wrapper .desktop-pressure-card .pressure-gradient-fill {
    position: absolute;
    left: 0;
    top: calc(50% + 0.5px);
    transform: translateY(-50%);
    width: 100%;
    height: 32px;
    background: linear-gradient(to right, 
        #6B82FF 0%,
        #42D4FF 20%,
        #42FF88 40%,
        #D7FF42 60%,
        #FFB142 80%,
        #FF4242 100%);
    opacity: 0.9;
}

.ergonix-wrapper .desktop-pressure-card .pressure-label-low {
    position: absolute;
    left: 16px;
    bottom: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(26, 26, 26, 0.5);
}

.ergonix-wrapper .desktop-pressure-card .pressure-label-high {
    position: absolute;
    right: 16px;
    bottom: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: rgba(26, 26, 26, 0.5);
    text-align: right;
}

.ergonix-wrapper .relief-card {
    background: white;
    border: 1px solid #e3e1e1;
    border-radius: 8px;
    padding: 24px;
    max-width: 475px;
    z-index: 1;
    position: relative;
}

.ergonix-wrapper .relief-card-title {
    font-family: 'Sora', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.64px;
    line-height: 1.3;
    margin: 0 0 16px 0;
}

.ergonix-wrapper .relief-card-description {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #716666;
    line-height: 1.4;
    margin: 0;
}

/* Right side - Info */
.ergonix-wrapper .relief-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Weight Comparison */
.ergonix-wrapper .weight-comparison {
    background: #f2ebeb;
    border-radius: 12px;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e5e5;
    padding: 32px;
    height: 460px;
    position: relative;
    overflow: hidden;
}

.ergonix-wrapper .weight-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 40px;
}

.ergonix-wrapper .weight-dot {
    width: 8px;
    height: 8px;
    background: #04ac9c;
    border-radius: 50%;
}

.ergonix-wrapper .weight-text {
    font-family: 'Inter', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
}

/* Weight Comparison - Vertical Scale Ruler (Pixel Perfect Figma) */
.ergonix-wrapper .weight-scale-ruler {
    position: absolute;
    left: 0;
    top: 76px;
    width: 130px;
    height: 350px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ergonix-wrapper .scale-bar {
    height: 2px;
    background: #d9d9d9;
    width: 80px;
    position: relative;
}

/* Varying lengths for scale effect */
.ergonix-wrapper .scale-bar-1,
.ergonix-wrapper .scale-bar-11 {
    width: 100px;
}

.ergonix-wrapper .scale-bar-2,
.ergonix-wrapper .scale-bar-10 {
    width: 100px;
}

.ergonix-wrapper .scale-bar-4,
.ergonix-wrapper .scale-bar-5,
.ergonix-wrapper .scale-bar-6,
.ergonix-wrapper .scale-bar-7,
.ergonix-wrapper .scale-bar-8 {
    width: 100px;
}

/* Accent bar at 150kg position (3rd bar) */
.ergonix-wrapper .scale-bar-3.accent-bar {
    width: 169px;
    height: 4px;
    background: #04ac9c;
}

/* Accent bar at 100kg position (9th bar) */
.ergonix-wrapper .scale-bar-9.accent-bar-bottom {
    width: 138px;
    height: 3px;
    background: #d9d9d9;
}

/* Ergonix 150kg value positioning */
.ergonix-wrapper .weight-value-ergonix {
    position: absolute;
    left: 183px;
    top: 107px;
}

.ergonix-wrapper .value-main-ergonix {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.ergonix-wrapper .value-number-ergonix {
    font-family: 'Sora', sans-serif;
    font-size: 64px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -1.28px;
    line-height: 1.1;
}

.ergonix-wrapper .value-unit-ergonix {
    font-family: 'Sora', sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: #afafaf;
    letter-spacing: -0.6px;
}

.ergonix-wrapper .value-label-ergonix {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: rgba(113, 102, 102, 0.7);
    line-height: 1.4;
}

/* Market 100kg value positioning */
.ergonix-wrapper .weight-value-market {
    position: absolute;
    left: 186px;
    top: 335px;
}

.ergonix-wrapper .value-main-market {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 8px;
}

.ergonix-wrapper .value-number-market {
    font-family: 'Sora', sans-serif;
    font-size: 40px;
    font-weight: 600;
    color: rgba(26, 26, 26, 0.5);
    letter-spacing: -0.8px;
    line-height: 1.1;
}

.ergonix-wrapper .value-unit-market {
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: #afafaf;
    letter-spacing: -0.48px;
}

.ergonix-wrapper .value-label-market {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: rgba(113, 102, 102, 0.7);
    line-height: 1.4;
}

/* Support Section */
.ergonix-wrapper .support-section {
    padding: 32px 48px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ergonix-wrapper .support-title {
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #1a1a1a;
    letter-spacing: -0.48px;
    line-height: 1.1;
    margin: 0;
}

.ergonix-wrapper .support-description {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #716666;
    line-height: 1.4;
    margin: -16px 0 0 0;
}

/* Buy Comfort Button */
.ergonix-wrapper .buy-comfort-btn {
    background: #04ac9c;
    border: none;
    border-radius: 50px;
    padding: 6px 6px 6px 26px;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
}

.ergonix-wrapper .buy-comfort-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(4, 172, 156, 0.3);
}

.ergonix-wrapper .btn-text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: white;
    white-space: nowrap;
}

.ergonix-wrapper .btn-icon-wrapper {
    width: 46px;
    height: 46px;
    position: relative;
}

.ergonix-wrapper .btn-icon-bg {
    position: absolute;
    inset: 0;
    background: white;
    border-radius: 50%;
}

.ergonix-wrapper .btn-chair-img {
    position: absolute;
    width: 42px;
    height: 42px;
    top: 2px;
    left: 2px;
    border-radius: 50%;
    object-fit: cover;
    transform: scaleX(-1);
}

.ergonix-wrapper .btn-shadow {
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 2px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    filter: blur(2px);
}

/* Support Section Styles */
.ergonix-wrapper .support-matters-section {
    max-width: 1440px;
    margin: 160px auto 0;
    padding: 0 56px;
}

.ergonix-wrapper .support-header {
    text-align: center;
    margin-bottom: 41px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.ergonix-wrapper .support-main-title {
    font-family: 'Sora', sans-serif;
    font-size: 48px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.96px;
    line-height: 1.1;
    margin: 0;
}

.ergonix-wrapper .support-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #1a1a1a;
    line-height: 1.4;
    max-width: 507px;
    margin: 0;
    text-align: center;
}

.ergonix-wrapper .support-content {
    display: flex;
    gap: 20px;
    align-items: stretch;
    height: 720px;
}

/* Left side - Chair Visualization */
.ergonix-wrapper .chair-visualization {
    flex: 0 0 820px;
    background: white;
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 32px;
    display: flex;
    align-items: flex-end;
    position: relative;
    overflow: hidden;
}

.ergonix-wrapper .chair-image-placeholder {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.ergonix-wrapper .chair-card {
    background: white;
    border: 1px solid #e3e1e1;
    border-radius: 8px;
    padding: 24px;
    max-width: 475px;
    z-index: 1;
    position: relative;
}

.ergonix-wrapper .chair-card-title {
    font-family: 'Sora', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.64px;
    line-height: 1.3;
    margin: 0 0 16px 0;
}

.ergonix-wrapper .chair-card-description {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #716666;
    line-height: 1.4;
    margin: 0;
    max-width: 427px;
}

/* Right side - Spine Info */
.ergonix-wrapper .spine-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Spine Diagram */
.ergonix-wrapper .spine-diagram {
    background: #f2ebeb;
    border-radius: 12px;
    padding: 32px;
    height: 468px;
    position: relative;
    overflow: hidden;
}

.ergonix-wrapper .diagram-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    position: relative;
    z-index: 2;
}

.ergonix-wrapper .diagram-dot {
    width: 8px;
    height: 8px;
    background: #04ac9c;
    border-radius: 50%;
}

.ergonix-wrapper .diagram-text {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
}

.ergonix-wrapper .spine-visual {
    position: relative;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ergonix-wrapper .spine-svg {
    position: absolute;
    left: 20px;
    top: 0;
}

.ergonix-wrapper .spine-labels {
    position: absolute;
    right: 40px;
    top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 30px 0;
}

.ergonix-wrapper .spine-label {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
}

.ergonix-wrapper .label-line {
    width: 100px;
    height: 2px;
    background: #1a1a1a;
    opacity: 0.3;
    position: relative;
}

.ergonix-wrapper .label-line::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    background: #1a1a1a;
    border-radius: 50%;
    opacity: 0.5;
}

.ergonix-wrapper .label-text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    white-space: nowrap;
}

/* Stability Section */
.ergonix-wrapper .stability-section {
    padding: 32px 48px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ergonix-wrapper .stability-title {
    font-family: 'Sora', sans-serif;
    font-size: 24px;
    font-weight: 400;
    color: #1a1a1a;
    letter-spacing: -0.48px;
    line-height: 1.1;
    margin: 0;
}

.ergonix-wrapper .stability-description {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #716666;
    line-height: 1.4;
    margin: 0;
}

/* Quality & Warranty Button */
.ergonix-wrapper .quality-warranty-btn {
    background: transparent;
    border: 1px solid #c4c4c4;
    border-radius: 50px;
    padding: 16px 26px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 16px;
}

.ergonix-wrapper .quality-warranty-btn:hover {
    background: #f9f9f9;
    border-color: #1a1a1a;
    transform: translateY(-2px);
}

.ergonix-wrapper .quality-btn-text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #1a1a1a;
    white-space: nowrap;
}

.ergonix-wrapper .quality-arrow {
    transform: rotate(-90deg);
    transition: transform 0.3s ease;
}

.ergonix-wrapper .quality-warranty-btn:hover .quality-arrow {
    transform: rotate(-90deg) translateX(2px);
}

/* Certification Section */
.ergonix-wrapper .certification-section {
    max-width: 1440px;
    margin: 20px auto 0;
    padding: 0 56px;
}

.ergonix-wrapper .certification-container {
    background: #fafcfe;
    background: linear-gradient(135deg, rgba(238, 240, 242, 0) 61.745%, rgba(213, 213, 213, 0.2) 100%);
    border: 1px solid #e5e5e5;
    border-radius: 12px;
    padding: 80px 56px;
    position: relative;
    overflow: hidden;
    min-height: 600px;
    display: flex;
    align-items: center;
}

.ergonix-wrapper .certification-content {
    max-width: 731px;
    display: flex;
    flex-direction: column;
    gap: 56px;
    position: relative;
    z-index: 2;
}

.ergonix-wrapper .certification-title {
    font-family: 'Sora', sans-serif;
    font-size: 48px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.96px;
    line-height: 1.1;
    margin: 0;
}

.ergonix-wrapper .certification-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #716666;
    line-height: 1.4;
    max-width: 405px;
    margin: 16px 0 0 0;
}

.ergonix-wrapper .certifications-details {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.ergonix-wrapper .certification-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ergonix-wrapper .cert-item-title {
    font-family: 'Sora', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -0.64px;
    line-height: 1.1;
    margin: 0;
}

.ergonix-wrapper .cert-item-description {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #716666;
    line-height: 1.4;
    margin: 0;
}

/* Certificate Cards */
.ergonix-wrapper .certificate-cards {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 40px;
    z-index: 3;
}

.ergonix-wrapper .certificate-card {
    background: white;
    border-radius: 13px;
    box-shadow: 9px 22px 14px 0px rgba(0, 0, 0, 0.05),
                1px 3px 7px 0px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ergonix-wrapper .certificate-card:hover {
    transform: translateY(-4px);
    box-shadow: 12px 28px 20px 0px rgba(0, 0, 0, 0.08),
                2px 4px 10px 0px rgba(0, 0, 0, 0.12);
}

.ergonix-wrapper .tuv-card {
    transform: rotate(3deg);
}

.ergonix-wrapper .bifma-card {
    transform: rotate(-2deg) translateX(20px);
}

.ergonix-wrapper .card-header {
    padding: 16px 42px;
    text-align: center;
}

.ergonix-wrapper .tuv-header {
    background: #4fc6ef;
}

.ergonix-wrapper .bifma-header {
    background: #ffb899;
}

.ergonix-wrapper .card-header-text {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #070707;
    text-transform: uppercase;
    letter-spacing: -0.36px;
    line-height: 1.1;
}

.ergonix-wrapper .card-body {
    padding: 32px 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
}

.ergonix-wrapper .tuv-logo,
.ergonix-wrapper .bifma-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Background Decoration */
.ergonix-wrapper .certification-bg-decoration {
    position: absolute;
    right: -100px;
    top: -100px;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(79, 198, 239, 0.05) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Designer Section */
.ergonix-wrapper .designer-section {
    max-width: 1440px;
    margin: 160px auto 0;
    padding: 0 56px;
}

.ergonix-wrapper .designer-container {
    background: linear-gradient(135deg, #f3f3f3 0%, rgba(243, 243, 243, 0.8) 40%, rgba(243, 243, 243, 0.2) 80%, transparent 100%);
    border-radius: 12px;
    box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    height: 900px;
    overflow: hidden;
}

/* Background blurred image */
.ergonix-wrapper .designer-bg-image {
    position: absolute;
    top: 16px;
    left: 72px;
    right: 0;
    height: 884px;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    filter: blur(50px);
    opacity: 0.15;
    z-index: 1;
}


/* Workspace image */
.ergonix-wrapper .workspace-image {
    position: absolute;
    top: 56px;
    left: 56px;
    width: 285px;
    height: 285px;
    border-radius: 12px;
    box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.1);
    z-index: 2;
    overflow: hidden;
}

.ergonix-wrapper .workspace-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    border-radius: 12px;
}

/* Designer portrait overlay */
.ergonix-wrapper .designer-portrait {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    z-index: 2;
    overflow: visible;
}

.ergonix-wrapper .designer-portrait img {
    width: auto;
    height: 90%;
    max-width: none;
    object-fit: contain;
    object-position: right bottom;
    position: absolute;
    top: auto;
    bottom: 0;
    right: 0;
    transform: translateY(0);
}

/* Designer content */
.ergonix-wrapper .designer-content {
    position: absolute;
    bottom: 150px;
    left: 56px;
    max-width: 448px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    z-index: 3;
}

.ergonix-wrapper .designer-title {
    font-family: 'Sora', sans-serif;
    font-size: 56px;
    font-weight: 600;
    color: #1a1a1a;
    letter-spacing: -1.12px;
    line-height: 1.1;
    margin: 0;
}

.ergonix-wrapper .designer-description {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #716666;
    line-height: 1.4;
    margin: -16px 0 0 0;
}

/* Learn More Button */
.ergonix-wrapper .learn-more-btn {
    background: transparent;
    border: 1px solid #c4c4c4;
    border-radius: 50px;
    padding: 16px 26px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    width: fit-content;
}

.ergonix-wrapper .learn-more-btn:hover {
    background: white;
    border-color: #1a1a1a;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ergonix-wrapper .learn-more-text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #1a1a1a;
    white-space: nowrap;
}

.ergonix-wrapper .learn-more-arrow {
    transform: rotate(-90deg);
    transition: transform 0.3s ease;
}

.ergonix-wrapper .learn-more-btn:hover .learn-more-arrow {
    transform: rotate(-90deg) translateX(2px);
}

/* Responsive Design - Preserved Media Queries */
@media (max-width: 1400px) {
    .ergonix-wrapper .main-container {
        padding-left: 60px;
        padding-right: 60px;
    }
    
    .ergonix-wrapper .relief-section {
        padding: 0 40px;
    }
    
    .ergonix-wrapper .relief-visualization {
        flex: 0 0 700px;
        height: 640px;
    }
    
    .ergonix-wrapper .support-matters-section {
        padding: 0 40px;
    }
    
    .ergonix-wrapper .chair-visualization {
        flex: 0 0 700px;
    }
    
    .ergonix-wrapper .certification-section {
        padding: 0 40px;
    }
    
    .ergonix-wrapper .certificate-cards {
        right: 40px;
    }
    
    .ergonix-wrapper .designer-section {
        padding: 0 40px;
    }
    
    .ergonix-wrapper .designer-bg-image {
        left: 40px;
    }
}

/* Technical Specifications Section */
.ergonix-wrapper .specifications-section {
    padding: 60px 56px;
    background: #ffffff;
}

.ergonix-wrapper .specifications-container {
    max-width: 1328px;
    margin: 0 auto;
}

.ergonix-wrapper .specifications-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid #e5e5e5;
}

.ergonix-wrapper .spec-header-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ergonix-wrapper .spec-title {
    font-family: 'Sora', sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.96px;
    color: #1a1a1a;
    margin: 0;
}

.ergonix-wrapper .spec-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #1a1a1a;
    margin: 0;
}

.ergonix-wrapper .spec-toggle-btn {
    width: 48px;
    height: 48px;
    background: #04ac9c;
    border-radius: 50px;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: rotate(270deg);
    transition: all 0.3s ease;
}

.ergonix-wrapper .spec-toggle-btn:hover {
    background: #03978a;
}

.ergonix-wrapper .specifications-table-wrapper {
    overflow-x: auto;
}

.ergonix-wrapper .specifications-table {
    width: 100%;
    border-collapse: collapse;
}

.ergonix-wrapper .specifications-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
}

.ergonix-wrapper .specifications-table tbody tr:last-child {
    border-bottom: none;
}

.ergonix-wrapper .specifications-table td {
    padding: 32px 0;
    vertical-align: top;
}

.ergonix-wrapper .spec-category {
    width: 200px;
    font-family: 'Sora', sans-serif;
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    padding-right: 48px;
}

.ergonix-wrapper .spec-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ergonix-wrapper .spec-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 24px;
    background: #f8f8f8;
    border-radius: 8px;
    transition: background 0.2s ease;
}

.ergonix-wrapper .spec-item:hover {
    background: #f0f0f0;
}

.ergonix-wrapper .spec-label {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #666666;
}

.ergonix-wrapper .spec-value {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #1a1a1a;
    text-align: right;
}

@media (max-width: 768px) {
    .ergonix-wrapper .specifications-section {
        padding: 60px 20px;
    }
    
    .ergonix-wrapper .spec-title {
        font-size: 36px;
    }
    
    .ergonix-wrapper .specifications-table td {
        display: block;
        width: 100%;
        padding: 16px 0;
    }
    
    .ergonix-wrapper .spec-category {
        width: 100%;
        margin-bottom: 16px;
        padding-right: 0;
    }
    
    .ergonix-wrapper .spec-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .ergonix-wrapper .spec-value {
        text-align: left;
    }
}

/* CTA Section */
.ergonix-wrapper .cta-section {
    padding: 60px 56px;
    background: #ffffff;
    text-align: center;
}

.ergonix-wrapper .cta-container {
    max-width: 809px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.ergonix-wrapper .cta-badge {
    background: #000000;
    color: white;
    padding: 10px 18px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.6;
}

.ergonix-wrapper .cta-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.ergonix-wrapper .cta-title {
    font-family: 'Sora', sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.96px;
    color: #000000;
    margin: 0;
}

.ergonix-wrapper .cta-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #1a1a1a;
    margin: 0;
    max-width: 550px;
}

.ergonix-wrapper .cta-button {
    background: #04ac9c;
    border: none;
    border-radius: 50px;
    padding: 6px 6px 6px 26px;
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ergonix-wrapper .cta-button:hover {
    background: #03978a;
    transform: scale(1.05);
}

.ergonix-wrapper .cta-button-text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: white;
}

.ergonix-wrapper .cta-button-icon {
    width: 46px;
    height: 46px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ergonix-wrapper .chair-icon {
    display: none; /* Hide chair icon */
}

.ergonix-wrapper .chair-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* FAQ Section */
.ergonix-wrapper .faq-section {
    padding: 60px 56px;
    background: rgba(243, 243, 243, 0.6);
    border-radius: 12px;
    margin-top: 60px;
}

.ergonix-wrapper .faq-container {
    max-width: 700px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.ergonix-wrapper .faq-header {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ergonix-wrapper .faq-title {
    font-family: 'Sora', sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.96px;
    color: #1a1a1a;
    margin: 0;
}

.ergonix-wrapper .faq-subtitle {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #1a1a1a;
    margin: 0;
}

.ergonix-wrapper .faq-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ergonix-wrapper .faq-item {
    background: white;
    border-radius: 33px;
    padding: 10px 10px 10px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    flex-wrap: wrap;
}

.ergonix-wrapper .faq-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.ergonix-wrapper .faq-question {
    font-family: 'Inter', sans-serif;
    font-size: 15.125px;
    font-weight: 500;
    line-height: 24px;
    color: #131211;
    flex: 1;
    padding-right: 20px;
}

.ergonix-wrapper .faq-toggle {
    width: 48px;
    height: 48px;
    background: rgba(243, 243, 243, 0.6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ergonix-wrapper .faq-toggle svg {
    transition: transform 0.3s ease;
}

.ergonix-wrapper .faq-answer {
    display: none;
    width: 100%;
    padding: 16px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #666666;
    border-top: 1px solid #f0f0f0;
    margin-top: 12px;
}

.ergonix-wrapper .faq-item.active {
    background: white;
    border-radius: 12px;
    padding-bottom: 16px;
}

.ergonix-wrapper .faq-ask-button {
    background: #000000;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 14px 40px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ergonix-wrapper .faq-ask-button:hover {
    background: #333333;
    transform: scale(1.05);
}

/* Related Products Section */
.ergonix-wrapper .related-products-section {
    padding: 60px 56px;
    background: #ffffff;
}

.ergonix-wrapper .related-products-container {
    max-width: 1328px;
    margin: 0 auto;
}

.ergonix-wrapper .related-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 48px;
}

.ergonix-wrapper .related-title {
    font-family: 'Sora', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.8px;
    color: #1a1a1a;
    margin: 0;
}

.ergonix-wrapper .view-all-link {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #04ac9c;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ergonix-wrapper .view-all-link:hover {
    color: #03978a;
    transform: translateX(5px);
}

.ergonix-wrapper .related-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
}

.ergonix-wrapper .related-product-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ergonix-wrapper .related-product-link {
    text-decoration: none;
    color: inherit;
}

.ergonix-wrapper .related-product-image {
    width: 100%;
    height: 292px;
    background: rgba(243, 243, 243, 0.6);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.ergonix-wrapper .related-product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.ergonix-wrapper .related-product-card:hover .related-product-image img {
    transform: scale(1.05);
}

.ergonix-wrapper .placeholder-image {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ergonix-wrapper .related-product-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ergonix-wrapper .related-product-title {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.44px;
    color: #070707;
    margin: 0;
}

.ergonix-wrapper .related-product-price {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    color: #8c8484;
    margin: 0;
}

@media (max-width: 1200px) {
    .ergonix-wrapper .related-products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .ergonix-wrapper .related-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Hide Desktop Header on Mobile */
@media (max-width: 768px) {
    .ergonix-wrapper .header {
        display: none !important;
    }
    
    /* Move image sections to top of mobile layout */
    .ergonix-wrapper .main-image-section {
        order: -2; /* Show main image first */
    }
    
    .ergonix-wrapper .thumbnails-section {
        order: -1; /* Show thumbnails second */
        margin-top: 6px;
    }
    
    .ergonix-wrapper .main-container {
        display: flex;
        flex-direction: column;
    }
    
    /* Style thumbnails for mobile */
    .ergonix-wrapper .thumbnails-container {
        display: flex;
        gap: 4px;
        justify-content: center;
        width: 100%;
        align-items: center;
        flex-wrap: nowrap;
    }
    
    .ergonix-wrapper .thumbnail {
        width: 60px !important;
        height: 60px !important;
        border-radius: 8px !important;
        flex-shrink: 0;
        border: 2px solid transparent;
        transition: border-color 0.2s ease;
    }
    
    .ergonix-wrapper .thumbnail.active {
        border-color: #04ac9c !important;
    }
    
    .ergonix-wrapper .divider-line {
        width: 1px;
        height: 40px;
        background: #e5e5e5;
        margin: 0 8px;
    }
    
    .ergonix-wrapper .view-360 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 8px;
    }
    
    .ergonix-wrapper .view-360-text {
        font-size: 10px;
        color: #1a1a1a;
        font-weight: 500;
    }
    
    /* Hide breadcrumb text on mobile */
    .ergonix-wrapper .breadcrumb-text {
        display: none !important;
    }
}

/* Mobile-Specific Styles (768px viewport) - Pixel Perfect Figma Design */
@media (max-width: 768px) {
    /* Mobile Product Hero Container */
    .ergonix-wrapper.ergonix-mobile-hero {
        background: linear-gradient(to bottom, #f3f3f333, #f3f3f3) !important;
        min-height: 100vh !important;
        padding: 0 !important;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
    }

    /* Mobile Header - Using pixel-perfect Figma implementation above */

    .mobile-product-container {
        padding: 128px 10px 24px 10px;
        width: 100%;
        max-width: 375px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }


    /* Mobile Product Info Card */
    .mobile-product-info-card {
        background: white;
        border-radius: 12px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    /* Mobile Rating Section */
    .mobile-rating-section {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-rating-left {
        display: flex;
        align-items: end;
        gap: 2px;
        line-height: 0;
    }

    .mobile-stars {
        display: flex;
        gap: 1px;
        margin-right: 4px;
        margin-top: 1px;
    }

    .mobile-rating-text {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: #1a1a1a;
        line-height: 1.4;
        margin-left: 2px;
    }

    .mobile-reviews-count {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: rgba(26, 26, 26, 0.5);
        line-height: 1.4;
    }

    .mobile-leave-review {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: #04ac9c;
        text-decoration: none;
        border-bottom: 2px dashed rgba(4, 172, 156, 0.5);
        padding-bottom: 3px;
        cursor: pointer;
        line-height: 0;
    }

    /* Mobile Product Header */
    .mobile-product-header {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-product-title {
        font-family: 'Sora', sans-serif;
        font-size: 24px;
        font-weight: 600;
        color: #1a1a1a;
        line-height: 1.1;
        letter-spacing: -0.48px;
        margin: 0;
        text-align: left;
    }

    .mobile-product-tagline {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: #1a1a1a;
        line-height: 1.4;
        margin: 0;
        text-align: left;
    }

    /* Mobile Price Section */
    .mobile-price-section {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .mobile-price-row {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-current-price {
        font-family: 'Inter', sans-serif;
        font-size: 24px;
        font-weight: 600;
        color: #f9373f;
        line-height: 1.4;
    }

    .mobile-original-price {
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 400;
        color: #8c8484;
        line-height: 1.4;
        text-decoration: line-through;
        text-decoration-skip-ink: none;
        text-underline-position: from-font;
    }

    .mobile-discount-badge {
        background: #04AC9C;
        color: white;
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 600;
        padding: 2px 6px;
        border-radius: 4px;
        line-height: 1.4;
    }

    .mobile-vat-text {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: rgba(26, 26, 26, 0.5);
        line-height: 1.4;
    }

    /* Mobile Features Box */
    .mobile-features-box {
        background: #FFFFFF;
        border-radius: 12px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: 120px;
        justify-content: center;
    }

    .mobile-feature-item {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-feature-item span {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: #1a1a1a;
        line-height: 1.4;
        text-transform: capitalize;
    }

    /* Mobile Color Section */
    .mobile-color-section {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .mobile-color-label {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: #1a1a1a;
        line-height: 1.4;
    }

    .mobile-color-options {
        display: flex;
        gap: 6px;
    }

    .mobile-color-option {
        width: 72px;
        height: 38px;
        border-radius: 8px;
        cursor: pointer;
        border: 2px solid transparent;
        transition: border-color 0.2s ease;
    }

    .mobile-color-option.active {
        border-color: #04ac9c;
    }

    /* Mobile Divider Line */
    .mobile-divider-line {
        width: 100%;
        height: 1px;
        background: #e5e5e5;
    }

    /* Mobile Stories Section */
    .mobile-stories-section {
        display: flex;
        justify-content: space-between;
        height: 56px;
        align-items: center;
    }

    .mobile-story-avatar {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .mobile-avatar {
        width: 56px;
        height: 56px;
        border-radius: 100px;
        background-size: cover;
        background-position: center;
        position: relative;
        border: 2px solid #dddddd;
    }

    .mobile-avatar::after {
        content: '';
        position: absolute;
        inset: -4px;
        border: 2px solid #04ac9c;
        border-radius: 100px;
        background: transparent;
    }

    /* Mobile Stock Section */
    .mobile-stock-section {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .mobile-stock-label {
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: #f9373f;
        line-height: 1.4;
    }

    .mobile-stock-bar {
        width: 100%;
        height: 8px;
        background: rgba(243, 243, 243, 0.6);
        border-radius: 1000px;
        position: relative;
        border: 1px solid rgba(26, 26, 26, 0.03);
    }

    .mobile-stock-fill {
        width: 79px;
        height: 8px;
        background: linear-gradient(to right, rgba(249, 55, 63, 0.8), #f9373f);
        border-radius: 100px;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        box-shadow: 5px 0px 6px 0px rgba(249, 55, 63, 0.15);
    }

    /* Mobile Order Section */
    .mobile-order-section {
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }

    .mobile-order-button {
        width: 100%;
        height: 58px;
        background: #04ac9c;
        border: none;
        border-radius: 50px;
        color: white;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        cursor: pointer;
        line-height: 1.6;
        transition: background-color 0.2s ease;
    }

    .mobile-order-button:hover {
        background: #039187;
    }

    /* Mobile Shipping Timeline */
    .mobile-shipping-timeline {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        position: relative;
    }

    .mobile-shipping-timeline::before {
        content: '';
        position: absolute;
        top: 21px;
        left: 37.5px;
        right: 37.5px;
        height: 1px;
        background: #e5e5e5;
        z-index: 0;
    }

    .mobile-timeline-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        position: relative;
        z-index: 1;
    }

    .mobile-timeline-icon {
        width: 42px;
        height: 42px;
        background: #1a1a1a;
        border-radius: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .mobile-timeline-text {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 75px;
    }

    .mobile-timeline-date {
        font-family: 'Inter', sans-serif;
        font-size: 10px;
        font-weight: 500;
        color: #1a1a1a;
        line-height: 1.4;
        text-transform: capitalize;
    }

    .mobile-timeline-label {
        font-family: 'Inter', sans-serif;
        font-size: 10px;
        font-weight: 500;
        color: rgba(26, 26, 26, 0.5);
        line-height: 1.4;
        text-transform: capitalize;
        text-align: center;
    }

    /* Mobile Shipping Notice */
    .mobile-shipping-notice {
        display: flex;
        align-items: center;
        gap: 4px;
        justify-content: center;
    }

    .mobile-shipping-notice span {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: #04ac9c;
        line-height: 1.4;
    }

    /* Mobile Addon Section */
    .mobile-addon-section {
        background: rgba(243, 243, 243, 0.6);
        border-radius: 8px;
        padding: 8px 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        height: 89px;
    }

    .mobile-addon-checkbox {
        width: 18.333px;
        height: 18.333px;
        border: 0.917px solid #04ac9c;
        border-radius: 4px;
        flex-shrink: 0;
    }

    .mobile-addon-content {
        display: flex;
        align-items: center;
        gap: 2px;
        flex: 1;
    }

    .mobile-addon-image {
        width: 64px;
        height: 64px;
        background-size: cover;
        background-position: center;
        border-radius: 7.68px;
        flex-shrink: 0;
    }

    .mobile-addon-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        flex: 1;
        padding: 2px 0 12px 0;
    }

    .mobile-addon-title {
        font-family: 'Sora', sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: #1a1a1a;
        line-height: 1.4;
        text-transform: capitalize;
    }

    .mobile-addon-rating {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .mobile-addon-rating span {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: #1a1a1a;
        line-height: 1.4;
    }

    .mobile-addon-prices {
        display: flex;
        flex-direction: column;
        align-items: end;
        gap: 2px;
        padding-bottom: 12px;
    }

    .mobile-addon-current {
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: #1a1a1a;
        line-height: 1.5;
    }

    .mobile-addon-original {
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: #8c8484;
        line-height: 1.5;
        text-decoration: line-through;
        text-decoration-skip-ink: none;
        text-underline-position: from-font;
    }
}

/* Mobile Features Icons Section */
@media (max-width: 768px) {
    .mobile-features-icons {
        background: white;
        border-radius: 12px;
        padding: 16px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mobile-feature-icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
    }

    .mobile-feature-icon-item span {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 500;
        color: #1a1a1a;
        line-height: 1.4;
        text-transform: capitalize;
        text-align: center;
    }

    .mobile-feature-divider {
        width: 0;
        height: 40px;
        border-left: 1px solid #e5e5e5;
        transform: rotate(90deg);
    }

    /* Mobile Details Section */
    .mobile-details-section {
        background: white;
        border-radius: 12px;
        padding: 24px;
        display: flex;
        flex-direction: column;
    }

    .mobile-detail-item {
        display: flex;
        flex-direction: column;
    }

    .mobile-detail-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 0;
        cursor: pointer;
    }

    .mobile-detail-header span {
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 400;
        color: #1a1a1a;
        line-height: 1.4;
    }

    .mobile-detail-icon {
        transition: transform 0.2s ease;
    }

    .mobile-detail-icon.rotate {
        transform: rotate(45deg);
    }

    .mobile-detail-content {
        padding-bottom: 8px;
        display: none;
    }

    .mobile-detail-item.expanded .mobile-detail-content {
        display: block;
    }

    .mobile-detail-content p {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: rgba(26, 26, 26, 0.7);
        line-height: 1.4;
        margin: 0;
    }

    .mobile-detail-divider {
        width: 100%;
        height: 1px;
        background: #e5e5e5;
    }
    
    /* Mobile Accordion Details */
    .ergonix-wrapper .mobile-accordion-details {
      background: #ffffff;
      border-radius: 24px;
      padding: 24px;
      width: 100%;
      max-width: 398px;
      margin: 10px auto 10px auto;
      display: flex;
      flex-direction: column;
      gap: 16px;
    }

    .ergonix-wrapper .accordion-item {
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: 100%;
      position: relative;
    }

    .ergonix-wrapper .accordion-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      cursor: pointer;
      user-select: none;
      background: none;
      border: none;
      padding: 0;
      width: 100%;
      text-align: left;
    }

    .ergonix-wrapper .accordion-title {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: 14px;
      line-height: 1.4;
      color: #1a1a1a;
      flex: 1;
    }

    .ergonix-wrapper .accordion-icon {
      flex-shrink: 0;
      transition: none;
    }

    .ergonix-wrapper .accordion-icon .vertical-line {
      transition: opacity 0.2s ease;
    }

    .ergonix-wrapper .accordion-icon.minus .vertical-line {
      opacity: 0;
    }

    .ergonix-wrapper .accordion-icon.plus .vertical-line {
      opacity: 1;
    }

    .ergonix-wrapper .accordion-content {
      font-family: 'Inter', sans-serif;
      font-weight: 400;
      font-size: 12px;
      line-height: 1.4;
      color: rgba(26, 26, 26, 0.7);
      padding-right: 28px;
      overflow: hidden;
      max-height: 0;
      opacity: 0;
      transition: max-height 0.3s ease, opacity 0.3s ease;
    }

    .ergonix-wrapper .accordion-content.expanded {
      max-height: 500px; /* Generous height for German text */
      opacity: 1;
    }

    .ergonix-wrapper .accordion-content p {
      margin: 0;
      padding: 0;
    }

    .ergonix-wrapper .accordion-divider {
      width: 100%;
      height: 1px;
      background: #E8E8E8;
      margin-top: 8px;
    }

    .ergonix-wrapper .accordion-item:last-child .accordion-divider {
      display: none;
    }

    /* Accessibility focus states */
    .ergonix-wrapper .accordion-header:focus {
      outline: 2px solid #04ac9c;
      outline-offset: 2px;
      border-radius: 4px;
    }

    .ergonix-wrapper .accordion-header:focus:not(:focus-visible) {
      outline: none;
    }

    /* Mobile Video Section - Made to Fit You */
    .ergonix-wrapper .mobile-video-section {
        display: flex;
        flex-direction: column;
        gap: 21px;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 40px 16px;
        margin-top: 32px;
    }

    .ergonix-wrapper .mobile-video-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        width: 100%;
        max-width: 355px;
        padding: 0 10px;
    }

    .ergonix-wrapper .mobile-video-title {
        font-family: 'Sora', sans-serif;
        font-weight: 600;
        font-size: 30px;
        line-height: 1.1;
        letter-spacing: -0.6px;
        color: #1a1a1a;
        margin: 0;
        width: 100%;
        min-width: fit-content;
    }

    .ergonix-wrapper .mobile-video-description {
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.4;
        color: #1a1a1a;
        margin: 0;
        max-width: 309px;
        text-align: center;
    }

    .ergonix-wrapper .mobile-video-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: calc(100vw - 32px);
        height: calc(100vw - 32px);
        max-width: 430px;
        max-height: 430px;
        align-items: flex-start;
        justify-content: flex-start;
    }

    .ergonix-wrapper .mobile-video-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        overflow: hidden;
        border: 0.267px solid #e5e5e5;
    }

    .ergonix-wrapper .mobile-product-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px;
        background-color: #f5f5f5;
    }

    .ergonix-wrapper .mobile-video-play-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
        transition: opacity 0.3s ease;
        z-index: 2;
    }

    .ergonix-wrapper .mobile-video-play-overlay.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .ergonix-wrapper .mobile-play-icon {
        width: 56px;
        height: 56px;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
        transition: transform 0.2s ease;
    }

    .ergonix-wrapper .mobile-video-play-overlay:hover .mobile-play-icon {
        transform: scale(1.1);
    }

    .ergonix-wrapper .mobile-video-play-overlay:active .mobile-play-icon {
        transform: scale(0.95);
    }

    /* Mobile Awkward Sitting Section - Say Goodbye to Awkward Sitting */
    .ergonix-wrapper .mobile-awkward-sitting-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 40px 16px;
        margin-top: 32px;
    }

    .ergonix-wrapper .mobile-awkward-sitting-container {
        display: flex;
        flex-direction: column;
        gap: 24px;
        align-items: center;
        justify-content: flex-start;
        text-align: center;
        width: 100%;
        max-width: 355px;
    }

    .ergonix-wrapper .mobile-awkward-sitting-title {
        font-family: 'Sora', sans-serif;
        font-weight: 600;
        font-size: 30px;
        line-height: 1.1;
        letter-spacing: -0.6px;
        color: #1a1a1a;
        margin: 0;
        width: 100%;
        text-align: center;
    }

    .ergonix-wrapper .mobile-awkward-video-container {
        display: flex;
        flex-direction: column;
        width: calc(100vw - 32px);
        height: calc(100vw - 32px);
        max-width: 430px;
        max-height: 430px;
        align-items: center;
        justify-content: center;
    }

    .ergonix-wrapper .mobile-awkward-video-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        overflow: hidden;
        border: 0.267px solid #e5e5e5;
    }

    .ergonix-wrapper .mobile-awkward-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px;
        background-color: #f5f5f5;
    }

    .ergonix-wrapper .mobile-awkward-play-overlay {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        cursor: pointer;
        transition: opacity 0.3s ease;
        z-index: 2;
    }

    .ergonix-wrapper .mobile-awkward-play-overlay.hidden {
        opacity: 0;
        pointer-events: none;
    }

    .ergonix-wrapper .mobile-awkward-play-overlay:hover .mobile-play-icon {
        transform: scale(1.1);
    }

    .ergonix-wrapper .mobile-awkward-play-overlay:active .mobile-play-icon {
        transform: scale(0.95);
    }

    /* Mobile Relief Section */
    .ergonix-wrapper .mobile-relief-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 40px 16px;
        margin-top: 24px;
    }

    .ergonix-wrapper .mobile-relief-header {
        text-align: center;
        margin-bottom: 24px;
        max-width: 355px;
    }

    .ergonix-wrapper .mobile-relief-title {
        font-family: 'Sora', sans-serif;
        font-weight: 600;
        font-size: 30px;
        line-height: 1.1;
        letter-spacing: -0.6px;
        color: #1a1a1a;
        margin: 0 0 16px 0;
    }

    .ergonix-wrapper .mobile-relief-subtitle {
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        line-height: 1.4;
        color: #666;
        margin: 0;
    }

    .ergonix-wrapper .mobile-relief-video-container {
        position: relative;
        width: calc(100vw - 32px);
        max-width: 398px;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
        border-radius: 6px;
        overflow: visible;
        border: 0.544px solid #e5e5e5;
        background-color: #f5f5f5;
    }

    .ergonix-wrapper .mobile-relief-video-wrapper {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .ergonix-wrapper .mobile-relief-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 6px;
    }

    /* Pressure Overlay Card */
    .ergonix-wrapper .pressure-overlay-card {
        position: absolute;
        bottom: -46px;
        left: 50%;
        transform: translateX(-50%);
        width: 300px;
        height: 94px;
        background: white;
        border: 1px solid #e3e1e1;
        border-radius: 8px;
        padding: 0;
        z-index: 3;
    }

    .ergonix-wrapper .pressure-card-title {
        position: absolute;
        top: 12px;
        left: 50%;
        transform: translateX(-50%);
        width: 262px;
        font-family: 'Sora', sans-serif;
        font-weight: 600;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: -0.4px;
        color: #1a1a1a;
        margin: 0;
        text-align: center;
    }

    /* Mobile Relief Section Gradient - Figma Design */
    .ergonix-wrapper .pressure-gradient-container {
        position: absolute;
        left: 10px;
        right: 10px;
        top: 48px;
        height: 26px;
    }

    .ergonix-wrapper .pressure-gradient-bg {
        position: relative;
        width: 100%;
        height: 26px;
        background: #f3f3f3;
        border-radius: 1000px;
        border: 1px solid rgba(26, 26, 26, 0.03);
        overflow: hidden;
    }

    .ergonix-wrapper .pressure-gradient-fill {
        position: absolute;
        left: 0;
        top: calc(50% + 0.5px);
        transform: translateY(-50%);
        width: 100%;
        height: 32px;
        background: linear-gradient(to right, 
            #6B82FF 0%,
            #42D4FF 20%,
            #42FF88 40%,
            #F4FF42 60%,
            #FF9142 80%,
            #FF4242 100%
        );
        border-radius: 100px;
        box-shadow: 8px 0px 16px 0px rgba(249, 55, 63, 0.25), 0px 4px 12px 0px rgba(107, 130, 255, 0.15);
    }

    .ergonix-wrapper .pressure-label-low {
        position: absolute;
        left: 16px;
        top: 74px;
        width: 109px;
        font-family: 'Inter', sans-serif;
        font-size: 10px;
        color: #716666;
        line-height: 1.4;
        text-align: left;
    }

    .ergonix-wrapper .pressure-label-high {
        position: absolute;
        right: 16px;
        top: 74px;
        width: 100px;
        font-family: 'Inter', sans-serif;
        font-size: 10px;
        color: #716666;
        line-height: 1.4;
        text-align: right;
    }

    /* Mobile Armrest Carousel Section */
    .ergonix-wrapper .mobile-armrest-carousel-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 40px 16px;
        margin-top: 32px;
        overflow: hidden; /* Handle overflow at section level for peek effect */
    }

    .ergonix-wrapper .mobile-armrest-header {
        text-align: center;
        margin-bottom: 24px;
        max-width: 355px;
    }

    .ergonix-wrapper .mobile-armrest-title {
        font-family: 'Sora', sans-serif;
        font-weight: 600;
        font-size: 30px;
        line-height: 1.1;
        letter-spacing: -0.6px;
        color: #1a1a1a;
        margin: 0 0 8px 0;
    }

    .ergonix-wrapper .mobile-armrest-subtitle {
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        line-height: 1.4;
        color: #666;
        margin: 0;
    }

    .ergonix-wrapper .mobile-armrest-carousel-container {
        position: relative;
        width: calc(100vw - 32px);
        max-width: none; /* Removed max-width for proper peek effect */
        height: 344px;
        margin: 0 auto;
        overflow: visible; /* Changed to visible for peek effect */
        border-radius: 8px;
        border: 0.544px solid #e5e5e5;
        background-color: transparent; /* Transparent to see peek */
    }

    .ergonix-wrapper .armrest-videos-track {
        display: flex;
        width: auto; /* Let width expand naturally */
        height: 100%;
        transform: translateX(0);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        padding-left: 0; /* Remove padding */
    }

    .ergonix-wrapper .armrest-video-slide {
        width: calc((100vw - 32px) * 0.9); /* 90% of container width */
        height: 100%;
        flex-shrink: 0;
        position: relative;
        margin-right: calc((100vw - 32px) * 0.05); /* 5% gap relative to container */
    }
    
    .ergonix-wrapper .armrest-video-slide:last-child {
        width: calc(100vw - 32px); /* Container width with side margins */
        margin-right: 0; /* No margin on last slide */
        margin-left: 0; /* Center aligned, no offset */
    }

    .ergonix-wrapper .armrest-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
    }

    /* Navigation Arrows */
    .ergonix-wrapper .armrest-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 32px;
        height: 32px;
        background: rgba(255, 255, 255, 0.7);
        border-radius: 50%;
        border: 0.5px solid rgba(0, 0, 0, 0.2);
        z-index: 3;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s ease;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    }

    .ergonix-wrapper .armrest-nav:hover {
        background: rgba(255, 255, 255, 0.85);
        transform: translateY(-50%) scale(1.05);
    }

    .ergonix-wrapper .armrest-nav:active {
        transform: translateY(-50%) scale(0.95);
    }

    .ergonix-wrapper .armrest-nav-prev {
        left: 16px;
    }

    .ergonix-wrapper .armrest-nav-next {
        right: 16px;
    }

    .ergonix-wrapper .armrest-nav svg {
        color: #1a1a1a;
    }

    /* Dots Indicator */
    .ergonix-wrapper .armrest-dots {
        position: absolute;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 3;
    }

    .ergonix-wrapper .armrest-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.6);
        transition: all 0.3s ease;
        cursor: pointer;
        backdrop-filter: blur(2px);
    }

    .ergonix-wrapper .armrest-dot:hover {
        background: rgba(255, 255, 255, 0.8);
        transform: scale(1.2);
    }

    .ergonix-wrapper .armrest-dot.active {
        background: white;
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
    }

    /* Mobile Adjust Height Section */
    .ergonix-wrapper .mobile-adjust-height-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 40px 16px;
        gap: 24px;
        background: #FFFFFF;
    }

    .ergonix-wrapper .mobile-adjust-header {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        max-width: 355px;
    }

    .ergonix-wrapper .mobile-adjust-title {
        font-family: 'Sora', sans-serif;
        font-weight: 600;
        font-size: 28px;
        line-height: 1.2;
        letter-spacing: -0.56px;
        color: #1a1a1a;
        margin: 0;
    }

    .ergonix-wrapper .mobile-adjust-subtitle {
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 16px;
        line-height: 1.5;
        color: #716666;
        margin: 0;
        max-width: 300px;
    }

    .ergonix-wrapper .mobile-adjust-video-container {
        position: relative;
        width: calc(100vw - 32px);
        max-width: 430px;
        aspect-ratio: 1 / 1;
        margin: 0 auto;
        border-radius: 16px;
        overflow: hidden;
        background: #f8f8f8;
    }

    .ergonix-wrapper .mobile-adjust-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 16px;
        background: #000;
    }

    /* Adjust Height Overlay Card */
    .ergonix-wrapper .adjust-overlay-card {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: calc(100% - 40px);
        max-width: 350px;
        background: white;
        border-radius: 16px;
        padding: 20px;
        z-index: 4;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
        border: 1px solid rgba(0, 0, 0, 0.06);
    }

    .ergonix-wrapper .adjust-card-title {
        font-family: 'Sora', sans-serif;
        font-weight: 600;
        font-size: 20px;
        line-height: 1.3;
        letter-spacing: -0.4px;
        color: #1a1a1a;
        margin: 0 0 8px 0;
        text-align: center;
    }

    .ergonix-wrapper .adjust-card-subtitle {
        font-family: 'Inter', sans-serif;
        font-weight: 400;
        font-size: 14px;
        line-height: 1.4;
        color: #716666;
        margin: 0;
        text-align: center;
    }
}

@media (max-width: 430px) {
    .ergonix-wrapper .mobile-video-section {
        padding: 32px 12px;
        gap: 18px;
    }
    
    .ergonix-wrapper .mobile-awkward-sitting-section {
        padding: 32px 12px;
    }
    
    .ergonix-wrapper .mobile-awkward-sitting-title {
        font-size: 26px;
        letter-spacing: -0.5px;
    }
    
    .ergonix-wrapper .mobile-armrest-carousel-section {
        padding: 32px 12px;
    }
    
    .ergonix-wrapper .mobile-armrest-title {
        font-size: 26px;
        letter-spacing: -0.5px;
    }
    
    .ergonix-wrapper .mobile-armrest-carousel-container {
        height: 260px;
    }
    
    .ergonix-wrapper .mobile-adjust-height-section {
        padding: 32px 12px;
    }
    
    .ergonix-wrapper .mobile-adjust-title {
        font-size: 26px;
        letter-spacing: -0.5px;
    }
    
    .ergonix-wrapper .mobile-adjust-subtitle {
        font-size: 15px;
        max-width: 300px;
    }
    
    .ergonix-wrapper .mobile-adjust-video-container {
        width: calc(100vw - 24px);
    }
    
    .ergonix-wrapper .adjust-overlay-card {
        bottom: 16px;
        width: calc(100% - 32px);
        padding: 16px;
    }
    
    .ergonix-wrapper .adjust-card-title {
        font-size: 18px;
    }
    
    .ergonix-wrapper .adjust-card-subtitle {
        font-size: 13px;
    }
    
    .ergonix-wrapper .mobile-video-title {
        font-size: 26px;
        letter-spacing: -0.5px;
    }
    
    .ergonix-wrapper .mobile-video-description {
        font-size: 15px;
        max-width: 280px;
    }
    
    .ergonix-wrapper .mobile-relief-section {
        padding: 32px 12px;
        margin-top: 18px;
    }
    
    .ergonix-wrapper .mobile-relief-title {
        font-size: 26px;
        letter-spacing: -0.5px;
    }
    
    .ergonix-wrapper .mobile-relief-subtitle {
        font-size: 15px;
        max-width: 300px;
    }
    
    .ergonix-wrapper .mobile-relief-video-container {
        width: calc(100vw - 24px);
    }
    
    .ergonix-wrapper .pressure-overlay-card {
        width: 260px;
        height: 94px;
        bottom: -40px;
        padding: 12px 12px 20px 12px;
    }
    
    .ergonix-wrapper .pressure-card-title {
        font-size: 16px;
    }
}

@media (max-width: 375px) {
    .ergonix-wrapper .mobile-video-section {
        padding: 28px 10px;
    }
    
    .ergonix-wrapper .mobile-video-container {
        width: calc(100vw - 24px);
        height: calc(100vw - 24px);
    }
    
    .ergonix-wrapper .mobile-video-title {
        font-size: 24px;
    }
    
    .ergonix-wrapper .mobile-awkward-sitting-section {
        padding: 28px 10px;
    }
    
    .ergonix-wrapper .mobile-awkward-video-container {
        width: calc(100vw - 24px);
        height: calc(100vw - 24px);
    }
    
    .ergonix-wrapper .mobile-awkward-sitting-title {
        font-size: 24px;
    }
    
    .ergonix-wrapper .mobile-relief-section {
        padding: 32px 12px;
        margin-top: 20px;
    }
    
    .ergonix-wrapper .mobile-relief-title {
        font-size: 26px;
        letter-spacing: -0.52px;
    }
    
    .ergonix-wrapper .mobile-relief-video-container {
        width: calc(100vw - 24px);
    }
    
    .ergonix-wrapper .pressure-overlay-card {
        width: 280px;
        height: 94px;
        bottom: -44px;
        padding: 14px 14px 22px 14px;
    }
    
    .ergonix-wrapper .pressure-card-title {
        font-size: 18px;
    }
    
    .ergonix-wrapper .mobile-armrest-carousel-section {
        padding: 28px 10px;
    }
    
    .ergonix-wrapper .mobile-armrest-title {
        font-size: 24px;
    }
    
    .ergonix-wrapper .mobile-armrest-carousel-container {
        height: 240px;
    }
    
    .ergonix-wrapper .mobile-adjust-height-section {
        padding: 28px 10px;
    }
    
    .ergonix-wrapper .mobile-adjust-title {
        font-size: 24px;
    }
    
    .ergonix-wrapper .mobile-adjust-video-container {
        width: calc(100vw - 24px);
    }
    
    .ergonix-wrapper .adjust-overlay-card {
        bottom: 12px;
        width: calc(100% - 24px);
        padding: 14px;
    }
    
    .ergonix-wrapper .adjust-card-title {
        font-size: 16px;
    }
    
    .ergonix-wrapper .adjust-card-subtitle {
        font-size: 12px;
    }
    
    .ergonix-wrapper .mobile-video-description {
        font-size: 14px;
        max-width: 260px;
    }
}

@media (max-width: 600px) {
    .ergonix-wrapper .cta-section,
    .ergonix-wrapper .faq-section,
    .ergonix-wrapper .related-products-section {
        padding: 60px 20px;
    }
    
    .ergonix-wrapper .cta-title,
    .ergonix-wrapper .faq-title {
        font-size: 36px;
    }
    
    .ergonix-wrapper .related-products-grid {
        grid-template-columns: 1fr;
    }
    
    .ergonix-wrapper .related-header {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }
}

/* Footer Section */
.ergonix-wrapper .footer-section {
    background: #FFFFFF;
    padding: 60px 0 40px;
    margin-top: 60px;
    position: relative;
}

.ergonix-wrapper .footer-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

.ergonix-wrapper .footer-top {
    display: grid;
    grid-template-columns: 334px 1fr;
    gap: 120px;
    margin-bottom: 64px;
}

.ergonix-wrapper .footer-newsletter {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.ergonix-wrapper .footer-logo svg {
    height: 62px;
    width: auto;
}

.ergonix-wrapper .newsletter-text {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1.4;
    color: #1A1A1A;
    margin: 0;
}

.ergonix-wrapper .newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.ergonix-wrapper .newsletter-input {
    background: rgba(243, 243, 243, 0.6);
    border: none;
    border-radius: 8px;
    padding: 16px 20px;
    font-family: 'Liberation Sans', 'Inter', sans-serif;
    font-size: 14px;
    color: #131211;
    width: 100%;
    box-sizing: border-box;
}

.ergonix-wrapper .newsletter-input::placeholder {
    color: rgba(19, 18, 17, 0.6);
    letter-spacing: 0.35px;
}

.ergonix-wrapper .newsletter-input:focus {
    outline: none;
    background: #ECECEC;
}

.ergonix-wrapper .newsletter-button {
    background: #000000;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 14px 40px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.6;
    cursor: pointer;
    transition: all 0.3s ease;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ergonix-wrapper .newsletter-button:hover {
    background: #1A1A1A;
    transform: translateY(-2px);
}

.ergonix-wrapper .footer-contact {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
}

.ergonix-wrapper .contact-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    color: #000000;
    line-height: 1.6;
}

.ergonix-wrapper .contact-icon {
    width: 35px;
    height: 35px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ergonix-wrapper .contact-icon svg {
    width: 15px;
    height: 15px;
}

.ergonix-wrapper .footer-products {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ergonix-wrapper .footer-section-title {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #1A1A1A;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ergonix-wrapper .product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
}

.ergonix-wrapper .footer-product-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 376px;
}

.ergonix-wrapper .footer-product-card .product-image {
    width: 100%;
    height: 292px;
    background: rgba(243, 243, 243, 0.6);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.ergonix-wrapper .footer-product-card .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ergonix-wrapper .footer-product-card .product-image .placeholder-bg {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #F3F3F3 0%, #E8E8E8 100%);
}

.ergonix-wrapper .footer-product-card .product-title {
    font-family: 'Sora', sans-serif;
    font-size: 22px;
    font-weight: 600;
    color: #070707;
    margin: 0;
    letter-spacing: -0.44px;
    line-height: 1.1;
}

.ergonix-wrapper .footer-product-card .product-price {
    font-family: 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 500;
    color: #8C8484;
    margin: -12px 0 0 0;
    line-height: 1.4;
}

.ergonix-wrapper .footer-divider {
    width: 100%;
    height: 1px;
    background: #E5E5E5;
    margin: 48px 0;
}

.ergonix-wrapper .footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 80px;
}

.ergonix-wrapper .footer-links {
    display: flex;
    gap: 120px;
}

.ergonix-wrapper .footer-column {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ergonix-wrapper .column-label {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #8C8484;
    margin-bottom: 8px;
}

.ergonix-wrapper .column-links {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ergonix-wrapper .column-links a {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #000000;
    text-decoration: none;
    line-height: 1.6;
    transition: color 0.3s ease;
}

.ergonix-wrapper .column-links a:hover {
    color: #04AC9C;
}

.ergonix-wrapper .footer-social {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 36px;
}

.ergonix-wrapper .social-link {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.ergonix-wrapper .social-link:hover {
    transform: translateY(-2px);
}

.ergonix-wrapper .social-link svg {
    width: 18px;
    height: 18px;
}

.ergonix-wrapper .footer-legal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.ergonix-wrapper .legal-links {
    display: flex;
    gap: 16px;
}

.ergonix-wrapper .legal-links a {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #000000;
    text-decoration: none;
    transition: color 0.3s ease;
}

.ergonix-wrapper .legal-links a:hover {
    color: #04AC9C;
}

.ergonix-wrapper .copyright {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: #6F6E6C;
    margin: 0;
}

.ergonix-wrapper .back-to-top {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 48px;
    height: 48px;
    background: #04AC9C;
    border: none;
    border-radius: 50px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
}

.ergonix-wrapper .back-to-top:hover {
    transform: translateY(-4px);
    background: #039B8C;
}

.ergonix-wrapper .back-to-top svg {
    width: 20px;
    height: 20px;
}

/* Footer Responsive */
@media (max-width: 1200px) {
    .ergonix-wrapper .footer-top {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    
    .ergonix-wrapper .footer-newsletter {
        max-width: 400px;
    }
    
    .ergonix-wrapper .product-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    }
    
    .ergonix-wrapper .footer-links {
        gap: 60px;
    }
}

@media (max-width: 768px) {
    .ergonix-wrapper .footer-section {
        padding: 60px 0 30px;
        margin-top: 60px;
    }
    
    .ergonix-wrapper .footer-bottom {
        flex-direction: column;
        gap: 40px;
    }
    
    .ergonix-wrapper .footer-links {
        flex-direction: column;
        gap: 30px;
    }
    
    .ergonix-wrapper .footer-social {
        margin-top: 0;
    }
    
    .ergonix-wrapper .footer-legal {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
    
    .ergonix-wrapper .back-to-top {
        display: flex;
    }
}

@media (max-width: 1200px) {
    .ergonix-wrapper .main-container {
        grid-template-columns: 76px 600px 1fr;
        padding-left: 40px;
        padding-right: 40px;
        gap: 30px;
    }

    .ergonix-wrapper .main-image-section {
        width: 600px;
        height: 600px;
    }

    .ergonix-wrapper .product-card,
    .ergonix-wrapper .guarantees-card,
    .ergonix-wrapper .info-card {
        width: 448px;
    }

    .ergonix-wrapper .video-section {
        margin: 60px auto 0;
        padding: 60px 40px;
    }

    .ergonix-wrapper .video-title {
        font-size: 40px;
    }

    .ergonix-wrapper .video-container {
        height: 600px;
    }

    .ergonix-wrapper .features-section {
        padding: 0 40px 60px 40px;
    }

    .ergonix-wrapper .goodbye-section {
        padding: 0 40px 80px 40px;
    }

    .ergonix-wrapper .goodbye-title {
        font-size: 48px;
    }

    .ergonix-wrapper .goodbye-container {
        min-height: 500px;
    }

    .ergonix-wrapper .dynamic-backrest-section {
        padding: 40px 40px 30px 40px;
    }
    
    .ergonix-wrapper .dynamic-backrest-title {
        font-size: 48px;
    }

    .ergonix-wrapper .chair-showcase-section {
        padding: 0 40px 80px 40px;
    }
    
    .ergonix-wrapper .showcase-text-card {
        width: 420px;
        padding: 32px;
    }
    
    .ergonix-wrapper .showcase-title {
        font-size: 40px;
    }

    .ergonix-wrapper .adjustments-section {
        padding: 0 40px 80px 40px;
    }

    .ergonix-wrapper .adjustment-video-container {
        height: 450px;
    }
    
    .ergonix-wrapper .relief-title {
        font-size: 48px;
    }
    
    .ergonix-wrapper .relief-content {
        flex-direction: column;
        gap: 32px;
    }
    
    .ergonix-wrapper .relief-visualization {
        flex: none;
        width: 100%;
        height: 500px;
    }
    
    .ergonix-wrapper .relief-info {
        flex-direction: row;
        gap: 20px;
    }
    
    .ergonix-wrapper .weight-comparison,
    .ergonix-wrapper .support-section {
        flex: 1;
    }
    
    .ergonix-wrapper .support-main-title {
        font-size: 42px;
    }
    
    .ergonix-wrapper .support-content {
        flex-direction: column;
        height: auto;
        gap: 32px;
    }
    
    .ergonix-wrapper .chair-visualization {
        flex: none;
        width: 100%;
        height: 500px;
    }
    
    .ergonix-wrapper .spine-info {
        flex-direction: row;
        gap: 20px;
    }
    
    .ergonix-wrapper .spine-diagram,
    .ergonix-wrapper .stability-section {
        flex: 1;
    }
    
    .ergonix-wrapper .certification-container {
        padding: 60px 40px;
        flex-direction: column;
        align-items: flex-start;
    }
    
    .ergonix-wrapper .certificate-cards {
        position: relative;
        right: auto;
        top: auto;
        transform: none;
        margin-top: 60px;
        flex-direction: row;
        justify-content: center;
        width: 100%;
    }
    
    .ergonix-wrapper .tuv-card,
    .ergonix-wrapper .bifma-card {
        transform: none;
    }
    
    .ergonix-wrapper .certificate-card {
        max-width: 300px;
    }
    
    .ergonix-wrapper .designer-container {
        height: 700px;
    }
    
    .ergonix-wrapper .designer-bg-image {
        height: 684px;
    }
    
    .ergonix-wrapper .designer-title {
        font-size: 48px;
    }
    
}

@media (max-width: 992px) {
    .ergonix-wrapper .nav-menu {
        display: none;
    }

    .ergonix-wrapper .main-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
    }

    .ergonix-wrapper .thumbnails-section {
        flex-direction: row;
        justify-content: center;
        overflow-x: auto;
    }

    .ergonix-wrapper .thumbnails-container {
        flex-direction: row;
    }

    .ergonix-wrapper .product-info-section {
        width: 100%;
        max-width: 500px;
    }

    .ergonix-wrapper .product-card,
    .ergonix-wrapper .guarantees-card,
    .ergonix-wrapper .info-card {
        width: 100%;
    }

    .ergonix-wrapper .video-section {
        margin: 40px auto 0;
        padding: 50px 20px;
        gap: 32px;
    }

    .ergonix-wrapper .video-title {
        font-size: 36px;
    }

    .ergonix-wrapper .video-description {
        font-size: 15px;
    }

    .ergonix-wrapper .video-container {
        height: 450px;
    }

    .ergonix-wrapper .features-section {
        padding: 0 20px 50px 20px;
        gap: 20px;
        flex-wrap: wrap;
    }

    .ergonix-wrapper .feature-card {
        flex: 1 1 calc(50% - 10px);
        min-width: 250px;
    }

    .ergonix-wrapper .goodbye-section {
        padding: 0 20px 60px 20px;
    }

    .ergonix-wrapper .goodbye-container {
        min-height: 450px;
    }

    .ergonix-wrapper .goodbye-title {
        font-size: 40px;
        letter-spacing: -0.8px;
    }

    .ergonix-wrapper .goodbye-content {
        padding: 30px;
        max-width: 450px;
    }

    .ergonix-wrapper .goodbye-image {
        width: 50%;
    }

    .ergonix-wrapper .adjustments-section {
        padding: 0 20px 60px 20px;
        flex-direction: column;
        gap: 40px;
    }

    .ergonix-wrapper .adjustment-video-container {
        height: 400px;
        aspect-ratio: 1 / 1;
    }

    .ergonix-wrapper .adjustment-title {
        font-size: 22px;
    }
    
    .ergonix-wrapper .relief-section {
        padding: 0 24px;
        margin-top: 60px;
    }
    
    .ergonix-wrapper .relief-header {
        margin-bottom: 60px;
    }
    
    .ergonix-wrapper .relief-title {
        font-size: 40px;
    }
    
    .ergonix-wrapper .relief-subtitle {
        font-size: 14px;
    }
    
    .ergonix-wrapper .relief-info {
        flex-direction: column;
    }
    
    .ergonix-wrapper .weight-comparison {
        height: 400px;
    }
    
    .ergonix-wrapper .ergonix-bar .value-number {
        font-size: 48px;
    }
    
    .ergonix-wrapper .market-bar .value-number {
        font-size: 32px;
    }
    
    .ergonix-wrapper .support-matters-section {
        padding: 0 24px;
        margin-top: 60px;
    }
    
    .ergonix-wrapper .support-header {
        margin-bottom: 32px;
    }
    
    .ergonix-wrapper .support-main-title {
        font-size: 36px;
    }
    
    .ergonix-wrapper .support-subtitle {
        font-size: 14px;
    }
    
    .ergonix-wrapper .spine-info {
        flex-direction: column;
    }
    
    .ergonix-wrapper .spine-diagram {
        height: 400px;
    }
    
    .ergonix-wrapper .spine-labels {
        right: 20px;
    }
    
    .ergonix-wrapper .label-line {
        width: 60px;
    }
    
    .ergonix-wrapper .label-text {
        font-size: 14px;
    }
    
    .ergonix-wrapper .certification-section {
        padding: 0 24px;
        margin-top: 60px;
    }
    
    .ergonix-wrapper .certification-content {
        gap: 24px; /* Reduced from 56px to prevent empty space */
    }
    
    .ergonix-wrapper .certification-title {
        font-size: 36px;
    }
    
    .ergonix-wrapper .cert-item-title {
        font-size: 28px;
    }
    
    .ergonix-wrapper .certificate-cards {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    
    .ergonix-wrapper .certificate-card {
        width: 100%;
        max-width: 400px;
    }
    
    .ergonix-wrapper .designer-section {
        padding: 0 24px;
        margin-top: 60px;
    }
    
    .ergonix-wrapper .designer-container {
        height: 600px;
    }
    
    .ergonix-wrapper .workspace-image {
        width: 240px;
        height: 240px;
        top: 40px;
        left: 40px;
    }
    
    .ergonix-wrapper .designer-content {
        bottom: 80px;
        left: 40px;
    }
    
    .ergonix-wrapper .designer-portrait {
        width: 40%;
        height: 100%;
    }
    
    .ergonix-wrapper .designer-title {
        font-size: 40px;
    }
    
    .ergonix-wrapper .designer-description {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    
    .ergonix-wrapper .designer-content {
        background: rgba(255, 255, 255, 0.95);
        padding: 24px;
        border-radius: 8px;
        backdrop-filter: blur(10px);
    }
}

@media (max-width: 576px) {
    .ergonix-wrapper .header {
        left: 20px;
        right: 20px;
    }

    .ergonix-wrapper .main-image-section {
        width: 100%;
        max-width: 400px;
        height: 400px;
    }

    .ergonix-wrapper .thumbnail {
        width: 50px;
        height: 50px;
    }

    .ergonix-wrapper .view-360 {
        width: 50px;
        height: 50px;
    }

    .ergonix-wrapper .video-section {
        margin: 30px auto 0;
        padding: 40px 16px;
        gap: 24px;
    }

    .ergonix-wrapper .video-title {
        font-size: 28px;
        letter-spacing: -0.56px;
    }

    .ergonix-wrapper .video-description {
        font-size: 14px;
        padding: 0 20px;
    }

    .ergonix-wrapper .video-container {
        height: 280px;
        border-radius: 8px;
    }

    .ergonix-wrapper .features-section {
        padding: 0 16px 40px 16px;
        gap: 16px;
        flex-direction: column;
    }

    .ergonix-wrapper .feature-card {
        flex: 1 1 100%;
        min-width: auto;
        padding: 16px 24px;
    }

    .ergonix-wrapper .feature-card .feature-title {
        font-size: 13px;
    }

    .ergonix-wrapper .feature-number {
        font-size: 36px;
    }

    .ergonix-wrapper .goodbye-section {
        padding: 0 16px 50px 16px;
    }

    .ergonix-wrapper .goodbye-container {
        min-height: 500px;
        flex-direction: column;
    }

    .ergonix-wrapper .goodbye-title {
        font-size: 32px;
        letter-spacing: -0.64px;
    }

    .ergonix-wrapper .goodbye-description {
        font-size: 14px;
    }

    .ergonix-wrapper .goodbye-content {
        padding: 24px;
        max-width: 100%;
    }

    .ergonix-wrapper .goodbye-image {
        position: relative;
        width: 100%;
        height: 300px;
    }

    .ergonix-wrapper .dynamic-backrest-section {
        display: none;
    }
    
    .ergonix-wrapper .dynamic-backrest-title {
        font-size: 32px;
    }
    
    .ergonix-wrapper .dynamic-backrest-description {
        font-size: 14px;
    }

    .ergonix-wrapper .chair-showcase-section {
        display: none;
    }
    
    .ergonix-wrapper .chair-showcase-container {
        height: 500px;
    }
    
    .ergonix-wrapper .showcase-text-card {
        width: calc(100% - 32px);
        bottom: 20px;
        right: 16px;
        left: 16px;
        padding: 24px;
    }
    
    .ergonix-wrapper .showcase-title {
        font-size: 32px;
    }

    .ergonix-wrapper .adjustments-section {
        padding: 0 16px 50px 16px;
        gap: 32px;
    }

    .ergonix-wrapper .adjustment-item {
        gap: 20px;
    }

    .ergonix-wrapper .adjustment-video-container {
        height: 350px;
        aspect-ratio: 1 / 1;
    }

    .ergonix-wrapper .adjustment-title {
        font-size: 20px;
    }

    .ergonix-wrapper .adjustment-description {
        font-size: 13px;
    }
    
    .ergonix-wrapper .relief-section {
        padding: 0 16px;
        margin-top: 60px;
    }
    
    .ergonix-wrapper .relief-title {
        font-size: 32px;
        letter-spacing: -0.64px;
    }
    
    .ergonix-wrapper .relief-header {
        margin-bottom: 40px;
    }
    
    .ergonix-wrapper .relief-visualization {
        height: 400px;
        padding: 20px;
    }
    
    .ergonix-wrapper .relief-card {
        padding: 16px;
    }
    
    .ergonix-wrapper .relief-card-title {
        font-size: 24px;
    }
    
    .ergonix-wrapper .weight-comparison {
        display: none;
    }
    
    .ergonix-wrapper .weight-chart {
        gap: 40px;
        padding: 0 20px;
    }
    
    .ergonix-wrapper .bar-fill {
        width: 80px;
    }
    
    .ergonix-wrapper .ergonix-bar .value-number {
        font-size: 40px;
    }
    
    .ergonix-wrapper .ergonix-bar .value-unit {
        font-size: 20px;
    }
    
    .ergonix-wrapper .market-bar .value-number {
        font-size: 28px;
    }
    
    .ergonix-wrapper .market-bar .value-unit {
        font-size: 18px;
    }
    
    .ergonix-wrapper .support-section {
        display: none;
    }
    
    .ergonix-wrapper .support-title {
        font-size: 20px;
    }
    
    .ergonix-wrapper .support-matters-section {
        padding: 0 16px;
        margin-top: 50px;
    }
    
    .ergonix-wrapper .support-main-title {
        font-size: 28px;
        letter-spacing: -0.56px;
    }
    
    .ergonix-wrapper .support-header {
        margin-bottom: 24px;
    }
    
    .ergonix-wrapper .chair-visualization {
        height: 400px;
        padding: 20px;
    }
    
    .ergonix-wrapper .chair-card {
        padding: 16px;
    }
    
    .ergonix-wrapper .chair-card-title {
        font-size: 24px;
    }
    
    .ergonix-wrapper .spine-diagram {
        display: none;
    }
    
    .ergonix-wrapper .spine-svg {
        transform: scale(0.8);
        left: -10px;
    }
    
    .ergonix-wrapper .spine-labels {
        right: 10px;
    }
    
    .ergonix-wrapper .label-line {
        width: 40px;
    }
    
    .ergonix-wrapper .label-text {
        font-size: 12px;
    }
    
    .ergonix-wrapper .stability-section {
        display: none;
    }
    
    .ergonix-wrapper .stability-title {
        font-size: 20px;
    }
    
    .ergonix-wrapper .quality-warranty-btn {
        padding: 12px 20px;
    }
    
    .ergonix-wrapper .quality-btn-text {
        font-size: 14px;
    }
    
    .ergonix-wrapper .certification-section {
        padding: 0 16px;
        margin-top: 50px;
    }
    
    .ergonix-wrapper .certification-container {
        padding: 40px 20px;
        min-height: auto;
    }
    
    .ergonix-wrapper .certification-title {
        font-size: 28px;
        letter-spacing: -0.56px;
        text-align: center;
    }
    
    .ergonix-wrapper .certification-subtitle {
        font-size: 12px;
    }
    
    .ergonix-wrapper .certifications-details {
        gap: 32px;
    }
    
    .ergonix-wrapper .cert-item-title {
        font-size: 24px;
    }
    
    .ergonix-wrapper .cert-item-description {
        font-size: 12px;
    }
    
    .ergonix-wrapper .certificate-cards {
        margin-top: 40px;
    }
    
    .ergonix-wrapper .card-header {
        padding: 12px 24px;
    }
    
    .ergonix-wrapper .card-header-text {
        font-size: 14px;
    }
    
    .ergonix-wrapper .card-body {
        padding: 24px;
    }
    
    .ergonix-wrapper .tuv-logo svg,
    .ergonix-wrapper .bifma-logo svg {
        width: 100%;
        height: auto;
    }
    
    .ergonix-wrapper .designer-section {
        padding: 0 16px;
        margin-top: 50px;
    }
    
    .ergonix-wrapper .designer-container {
        height: 500px;
    }
    
    .ergonix-wrapper .workspace-image {
        width: 180px;
        height: 180px;
        top: 24px;
        left: 24px;
    }
    
    .ergonix-wrapper .designer-content {
        bottom: 40px;
        left: 24px;
        right: 24px;
        max-width: none;
        gap: 24px;
        background: rgba(255, 255, 255, 0.95);
        padding: 24px;
        border-radius: 8px;
        backdrop-filter: blur(10px);
    }
    
    .ergonix-wrapper .designer-portrait {
        opacity: 0.3;
        width: 45%;
        height: 100%;
    }
    
    .ergonix-wrapper .designer-title {
        font-size: 32px;
        letter-spacing: -0.64px;
    }
    
    .ergonix-wrapper .designer-description {
        font-size: 12px;
    }
    
    .ergonix-wrapper .designer-description br {
        display: none;
    }
    
    .ergonix-wrapper .learn-more-btn {
        padding: 12px 20px;
    }
    
    .ergonix-wrapper .learn-more-text {
        font-size: 14px;
    }
    
    .ergonix-wrapper .designer-bg-image {
        left: 0;
        filter: blur(3px);
    }
}

/* =========================== */
/* MOBILE MENU - SIMPLIFIED & PERFORMANT */
/* =========================== */

.ergonix-wrapper .mobile-menu-overlay,
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1500;
    pointer-events: none;
    transition: background 0.3s ease;
    display: flex;
    align-items: flex-start;
}

.ergonix-wrapper .mobile-menu-overlay.active,
.mobile-menu-overlay.active {
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.ergonix-wrapper .mobile-menu-container,
.mobile-menu-container {
    width: 100%;
    background: white;
    border-radius: 0 0 20px 20px;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.ergonix-wrapper .mobile-menu-overlay.active .mobile-menu-container,
.mobile-menu-overlay.active .mobile-menu-container {
    transform: translateY(0);
}

.ergonix-wrapper .mobile-menu-announcement,
.mobile-menu-announcement {
    background: #04AC9C;
    color: white;
    padding: 8px;
    text-align: center;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.ergonix-wrapper .mobile-menu-header,
.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #E5E5E5;
}

.ergonix-wrapper .mobile-menu-logo,
.mobile-menu-logo {
    height: 38px;
    width: 104px;
}

.ergonix-wrapper .mobile-menu-close,
.mobile-menu-close {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    color: #1A1A1A;
    -webkit-tap-highlight-color: transparent;
}

.ergonix-wrapper .mobile-menu-nav,
.mobile-menu-nav {
    padding: 8px 0;
}

.ergonix-wrapper .mobile-menu-item,
.mobile-menu-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 18px;
    color: #1A1A1A;
    text-decoration: none;
    border-bottom: 1px solid #E5E5E5;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.ergonix-wrapper .mobile-menu-item:last-child {
    border-bottom: none;
}

.ergonix-wrapper .mobile-menu-item:active {
    background: #F5F5F5;
}

/* Body scroll lock */
body.mobile-menu-open,
body.mobile-cart-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* =========================== */
/* MOBILE CART OVERLAY STYLES */
/* =========================== */

/* Mobile Cart Overlay - Similar to Menu Overlay */
.ergonix-wrapper .mobile-cart-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0);
    z-index: 1500;
    pointer-events: none;
    transition: background 0.3s ease;
    display: flex;
    justify-content: flex-end;
}

.ergonix-wrapper .mobile-cart-overlay.active {
    background: rgba(0, 0, 0, 0.5);
    pointer-events: auto;
}

.ergonix-wrapper .mobile-cart-container {
    width: 90%;
    max-width: 400px;
    height: 100%;
    background: white;
    transform: translateX(100%);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
}

.ergonix-wrapper .mobile-cart-overlay.active .mobile-cart-container {
    transform: translateX(0);
}

.ergonix-wrapper .mobile-cart-header {
    padding: 20px;
    border-bottom: 1px solid #E0E0E0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ergonix-wrapper .mobile-cart-header h3 {
    font-family: 'Sora', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin: 0;
}

.ergonix-wrapper .mobile-cart-close {
    background: none;
    border: none;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #666;
}

.ergonix-wrapper .mobile-cart-items {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.ergonix-wrapper .mobile-cart-empty {
    text-align: center;
    color: #666;
    padding: 40px 20px;
    font-size: 16px;
}

.ergonix-wrapper .mobile-cart-item {
    display: flex;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #E0E0E0;
}

.ergonix-wrapper .mobile-cart-item:last-child {
    border-bottom: none;
}

.ergonix-wrapper .mobile-cart-item-image {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
}

.ergonix-wrapper .mobile-cart-item-details {
    flex: 1;
}

.ergonix-wrapper .mobile-cart-item-details h4 {
    font-family: 'Sora', sans-serif;
    font-size: 14px;
    font-weight: 500;
    margin: 0 0 8px 0;
    color: #333;
}

.ergonix-wrapper .mobile-cart-item-details p {
    font-size: 13px;
    color: #666;
    margin: 0;
}

.ergonix-wrapper .mobile-cart-item-remove {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
}

.ergonix-wrapper .mobile-cart-footer {
    padding: 20px;
    border-top: 1px solid #E0E0E0;
    background: white;
}

.ergonix-wrapper .mobile-cart-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.ergonix-wrapper .mobile-cart-checkout {
    width: 100%;
    padding: 15px;
    background: #04AC9C;
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Sora', sans-serif;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s ease;
}

.ergonix-wrapper .mobile-cart-checkout:active {
    background: #039688;
}

/* =========================== */
/* MOBILE CART DRAWER STYLES  */
/* =========================== */

@media (max-width: 768px) {
    /* Hide default cart icon button - we use our own */
    .ergonix-wrapper cart-drawer-component > button:first-child {
        display: none;
    }

    /* Only style cart drawer on mobile for Ergonix sections */
    .ergonix-wrapper ~ cart-drawer-component .cart-drawer__dialog,
    .ergonix-mobile-only ~ cart-drawer-component .cart-drawer__dialog,
    body.template-index cart-drawer-component .cart-drawer__dialog {
        background: white;
        border-radius: 0;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
    }

    /* Cart Drawer Header - Match Figma Design */
    .ergonix-wrapper ~ cart-drawer-component .cart-drawer__header,
    .ergonix-mobile-only ~ cart-drawer-component .cart-drawer__header,
    body.template-index cart-drawer-component .cart-drawer__header {
        background: white;
        padding: 18px 20px;
        border-bottom: 1px solid #F3F3F3;
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .ergonix-wrapper ~ cart-drawer-component .cart-drawer__heading,
    .ergonix-mobile-only ~ cart-drawer-component .cart-drawer__heading,
    body.template-index cart-drawer-component .cart-drawer__heading {
        font-family: 'Sora', sans-serif;
        font-size: 18px;
        font-weight: 400;
        color: #1a1a1a;
        text-transform: capitalize;
        margin: 0;
    }

    /* Close button styling */
    .ergonix-wrapper ~ cart-drawer-component .cart-drawer__close-button,
    .ergonix-mobile-only ~ cart-drawer-component .cart-drawer__close-button,
    body.template-index cart-drawer-component .cart-drawer__close-button {
        width: 24px;
        height: 24px;
        padding: 0;
        background: none;
        border: none;
    }

    /* Cart Items Container */
    .ergonix-wrapper ~ cart-drawer-component .cart-drawer__items,
    .ergonix-mobile-only ~ cart-drawer-component .cart-drawer__items,
    body.template-index cart-drawer-component .cart-drawer__items {
        padding: 10px 20px 32px 20px;
        gap: 32px;
    }

    /* Individual Cart Item - Match Figma Layout */
    .ergonix-wrapper ~ cart-drawer-component .cart-item,
    .ergonix-mobile-only ~ cart-drawer-component .cart-item,
    body.template-index cart-drawer-component .cart-item {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        padding: 0;
        border-bottom: none;
        margin-bottom: 32px;
    }

    .ergonix-wrapper ~ cart-drawer-component .cart-item:last-child,
    .ergonix-mobile-only ~ cart-drawer-component .cart-item:last-child,
    body.template-index cart-drawer-component .cart-item:last-child {
        margin-bottom: 0;
    }

    /* Product Image - Exactly like Figma */
    .ergonix-wrapper ~ cart-drawer-component .cart-item__image,
    .ergonix-mobile-only ~ cart-drawer-component .cart-item__image,
    body.template-index cart-drawer-component .cart-item__image {
        width: 100px;
        height: 100px;
        border-radius: 5.333px;
        border: 1.333px solid #F3F3F3;
        flex-shrink: 0;
        object-fit: cover;
    }

    /* Product Details Container */
    .ergonix-wrapper ~ cart-drawer-component .cart-item__details,
    .ergonix-mobile-only ~ cart-drawer-component .cart-item__details,
    body.template-index cart-drawer-component .cart-item__details {
        flex: 1;
        display: flex;
        flex-direction: column;
        min-height: 100px;
        padding: 0;
    }

    /* Left side: Product info and controls */
    .ergonix-wrapper ~ cart-drawer-component .cart-item__info,
    .ergonix-mobile-only ~ cart-drawer-component .cart-item__info,
    body.template-index cart-drawer-component .cart-item__info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        padding: 8px 0;
    }

    /* Product Name Header Row */
    .ergonix-wrapper ~ cart-drawer-component .cart-item__header,
    .ergonix-mobile-only ~ cart-drawer-component .cart-item__header,
    body.template-index cart-drawer-component .cart-item__header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: auto;
    }

    .ergonix-wrapper ~ cart-drawer-component .cart-item__name,
    .ergonix-mobile-only ~ cart-drawer-component .cart-item__name,
    body.template-index cart-drawer-component .cart-item__name {
        font-family: 'Sora', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: #1a1a1a;
        text-transform: capitalize;
        margin: 0;
        line-height: 1.4;
    }

    /* Delete button in header */
    .ergonix-wrapper ~ cart-drawer-component .cart-item__remove,
    .ergonix-mobile-only ~ cart-drawer-component .cart-item__remove,
    body.template-index cart-drawer-component .cart-item__remove {
        width: 22px;
        height: 22px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        margin-left: 8px;
    }

    /* Bottom Row: Quantity and Price */
    .ergonix-wrapper ~ cart-drawer-component .cart-item__bottom,
    .ergonix-mobile-only ~ cart-drawer-component .cart-item__bottom,
    body.template-index cart-drawer-component .cart-item__bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: auto;
    }

    /* Quantity Controls - Pill Design from Figma */
    .ergonix-wrapper ~ cart-drawer-component .cart-item__quantity,
    .ergonix-mobile-only ~ cart-drawer-component .cart-item__quantity,
    body.template-index cart-drawer-component .cart-item__quantity {
        background: #F3F3F3;
        border-radius: 100px;
        padding: 6px 16px;
        display: flex;
        align-items: center;
        gap: 16px;
        overflow: hidden;
    }

    .ergonix-wrapper ~ cart-drawer-component .quantity-btn,
    .ergonix-mobile-only ~ cart-drawer-component .quantity-btn,
    body.template-index cart-drawer-component .quantity-btn {
        background: white;
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.04);
        cursor: pointer;
        font-size: 15px;
        color: #1a1a1a;
        font-weight: 400;
    }

    .ergonix-wrapper ~ cart-drawer-component .quantity-number,
    .ergonix-mobile-only ~ cart-drawer-component .quantity-number,
    body.template-index cart-drawer-component .quantity-number {
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 500;
        color: #1a1a1a;
        min-width: 20px;
        text-align: center;
    }

    /* Price Column - Right Side */
    .ergonix-wrapper ~ cart-drawer-component .cart-item__price,
    .ergonix-mobile-only ~ cart-drawer-component .cart-item__price,
    body.template-index cart-drawer-component .cart-item__price {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 4px;
        justify-content: center;
        height: 100%;
    }

    .ergonix-wrapper ~ cart-drawer-component .price-original,
    .ergonix-mobile-only ~ cart-drawer-component .price-original,
    body.template-index cart-drawer-component .price-original {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: #8c8484;
        text-decoration: line-through;
    }

    .ergonix-wrapper ~ cart-drawer-component .price-sale,
    .ergonix-mobile-only ~ cart-drawer-component .price-sale,
    body.template-index cart-drawer-component .price-sale {
        font-family: 'Sora', sans-serif;
        font-size: 16px;
        font-weight: 600;
        color: #04ac9c;
        text-transform: capitalize;
    }

    /* Cart Summary Footer */
    .ergonix-wrapper ~ cart-drawer-component .cart-drawer__summary,
    .ergonix-mobile-only ~ cart-drawer-component .cart-drawer__summary,
    body.template-index cart-drawer-component .cart-drawer__summary {
        background: white;
        padding: 24px 20px;
        border-top: 1px solid #F3F3F3;
        position: sticky;
        bottom: 0;
        z-index: 10;
    }

    /* Order Overview Section */
    .ergonix-wrapper ~ cart-drawer-component .cart-summary-title,
    .ergonix-mobile-only ~ cart-drawer-component .cart-summary-title,
    body.template-index cart-drawer-component .cart-summary-title {
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 600;
        color: #1a1a1a;
        text-transform: capitalize;
        margin-bottom: 12px;
    }

    .ergonix-wrapper ~ cart-drawer-component .cart-summary-item,
    .ergonix-mobile-only ~ cart-drawer-component .cart-summary-item,
    body.template-index cart-drawer-component .cart-summary-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        color: #1a1a1a;
        text-transform: capitalize;
    }

    .ergonix-wrapper ~ cart-drawer-component .cart-summary-item.discount,
    .ergonix-mobile-only ~ cart-drawer-component .cart-summary-item.discount,
    body.template-index cart-drawer-component .cart-summary-item.discount {
        color: #f9373f;
    }

    /* Total Section */
    .ergonix-wrapper ~ cart-drawer-component .cart-total,
    .ergonix-mobile-only ~ cart-drawer-component .cart-total,
    body.template-index cart-drawer-component .cart-total {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin: 24px 0;
        padding-top: 16px;
        border-top: 1px solid #F3F3F3;
    }

    .ergonix-wrapper ~ cart-drawer-component .cart-total-left,
    .ergonix-mobile-only ~ cart-drawer-component .cart-total-left,
    body.template-index cart-drawer-component .cart-total-left {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .ergonix-wrapper ~ cart-drawer-component .cart-total-title,
    .ergonix-mobile-only ~ cart-drawer-component .cart-total-title,
    body.template-index cart-drawer-component .cart-total-title {
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: #1a1a1a;
        text-transform: capitalize;
    }

    .ergonix-wrapper ~ cart-drawer-component .cart-total-vat,
    .ergonix-mobile-only ~ cart-drawer-component .cart-total-vat,
    body.template-index cart-drawer-component .cart-total-vat {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: rgba(26, 26, 26, 0.5);
    }

    .ergonix-wrapper ~ cart-drawer-component .cart-total-right,
    .ergonix-mobile-only ~ cart-drawer-component .cart-total-right,
    body.template-index cart-drawer-component .cart-total-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    .ergonix-wrapper ~ cart-drawer-component .cart-total-price,
    .ergonix-mobile-only ~ cart-drawer-component .cart-total-price,
    body.template-index cart-drawer-component .cart-total-price {
        font-family: 'Inter', sans-serif;
        font-size: 18px;
        font-weight: 600;
        color: #04ac9c;
        text-transform: capitalize;
    }

    .ergonix-wrapper ~ cart-drawer-component .cart-total-shipping,
    .ergonix-mobile-only ~ cart-drawer-component .cart-total-shipping,
    body.template-index cart-drawer-component .cart-total-shipping {
        font-family: 'Inter', sans-serif;
        font-size: 12px;
        font-weight: 400;
        color: rgba(26, 26, 26, 0.5);
        text-align: right;
        white-space: nowrap;
    }

    /* Order Now Button - Match Figma exactly */
    .ergonix-wrapper ~ cart-drawer-component .cart-checkout-button,
    .ergonix-mobile-only ~ cart-drawer-component .cart-checkout-button,
    body.template-index cart-drawer-component .cart-checkout-button {
        background: #04ac9c;
        color: white;
        border: none;
        border-radius: 50px;
        height: 48px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        font-family: 'Inter', sans-serif;
        font-size: 16px;
        font-weight: 500;
        cursor: pointer;
        margin-bottom: 24px;
        transition: background-color 0.2s ease;
        text-decoration: none;
    }

    .ergonix-wrapper ~ cart-drawer-component .cart-checkout-button:hover,
    .ergonix-mobile-only ~ cart-drawer-component .cart-checkout-button:hover,
    body.template-index cart-drawer-component .cart-checkout-button:hover {
        background: #03998a;
    }

    .ergonix-wrapper ~ cart-drawer-component .cart-checkout-icon,
    .ergonix-mobile-only ~ cart-drawer-component .cart-checkout-icon,
    body.template-index cart-drawer-component .cart-checkout-icon {
        width: 20px;
        height: 20px;
    }

    /* Payment Methods Row - Match Figma */
    .ergonix-wrapper ~ cart-drawer-component .payment-methods,
    .ergonix-mobile-only ~ cart-drawer-component .payment-methods,
    body.template-index cart-drawer-component .payment-methods {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .ergonix-wrapper ~ cart-drawer-component .payment-method,
    .ergonix-mobile-only ~ cart-drawer-component .payment-method,
    body.template-index cart-drawer-component .payment-method {
        width: 38px;
        height: 24px;
        border-radius: 4px;
        background: #f8f9fa;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e9ecef;
        overflow: hidden;
    }

    .ergonix-wrapper ~ cart-drawer-component .payment-method img,
    .ergonix-mobile-only ~ cart-drawer-component .payment-method img,
    body.template-index cart-drawer-component .payment-method img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }
}

/* ================================
   ERGONIX MOBILE CART PAGE STYLES
   ================================ */

@media (max-width: 768px) {
  /* ================================
     ERGONIX MOBILE CART DRAWER STYLES - FIGMA DESIGN
     ================================ */
  
  /* Full screen mobile cart drawer */
  .cart-drawer__dialog {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background: white;
    overflow: hidden;
  }
  
  /* Inner cart container */
  .cart-drawer__inner {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative;
  }
  
  /* Fixed header - Shopping Cart + X */
  .cart-drawer__header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    z-index: 100 !important;
    padding: 16px 20px !important;
    text-align: center !important;
    border-bottom: 1px solid #E5E5E5 !important;
    box-shadow: none !important;
    height: auto !important;
  }
  
  /* Center "Shopping Cart" title - Figma specs */
  .cart-drawer__heading {
    font-family: 'Sora', sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #1a1a1a !important;
    text-transform: capitalize !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    text-align: center !important;
    position: relative !important;
  }
  
  /* Hide cart bubble count */
  .cart-drawer__heading cart-bubble {
    display: none !important;
  }
  
  /* Position X close button - Figma specs */
  .cart-drawer__close-button {
    position: absolute !important;
    right: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
  }
  
  .cart-drawer__close-button .svg-wrapper {
    width: 16px !important;
    height: 16px !important;
  }
  
  .cart-drawer__close-button svg {
    width: 16px !important;
    height: 16px !important;
    color: #8C8484 !important;
  }
  
  /* Cart content area - scrollable middle */
  #cart-drawer .cart-drawer__content {
    flex: 1 !important;
    min-height: 0 !important;
    padding: 90px 10px 20px !important;
    overflow-y: auto !important;
    background: white;
  }
  
  /* Cart items container */
  #cart-drawer .cart-drawer__items {
    width: 100% !important;
  }
  
  /* Convert table to cards - Figma specs */
  .cart-drawer .cart-items__table {
    display: block !important;
    width: 100% !important;
  }
  
  .cart-drawer .cart-items__table thead,
  .cart-drawer .cart-items__table tfoot {
    display: none !important;
  }
  
  .cart-drawer .cart-items__table tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 24px !important;
  }
  
  /* Product card styling - Figma specs */
  #cart-drawer .cart-item {
    display: flex !important;
    gap: 16px !important;
    padding: 0 !important;
    border: none !important;
    position: relative !important;
    background: transparent !important;
  }
  
  #cart-drawer .cart-item td {
    display: contents !important;
  }
  
  /* Product image - 100x100px with 5.333px border radius */
  #cart-drawer .cart-item__media,
  #cart-drawer .cart-item__image {
    width: 100px !important;
    height: 100px !important;
    border-radius: 5.333px !important;
    border: 1.333px solid #f3f3f3 !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    background: white;
  }
  
  #cart-drawer .cart-item__image img,
  #cart-drawer .cart-item__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  
  /* Product details wrapper */
  #cart-drawer .cart-item__details {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 8px 0 !important;
  }
  
  /* Product title - Sora SemiBold 14px */
  #cart-drawer .cart-item__name,
  #cart-drawer .cart-item__title {
    font-family: 'Sora', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    text-transform: capitalize !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    display: block !important;
  }
  
  #cart-drawer .cart-item__name a,
  #cart-drawer .cart-item__title a {
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-family: 'Sora', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
  }
  
  /* Hide vendor and properties */
  #cart-drawer .cart-item__vendor,
  #cart-drawer .cart-item__properties {
    display: none !important;
  }
  
  /* Bottom section with quantity and price */
  #cart-drawer .cart-item__bottom {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 8px !important;
  }
  
  /* Quantity selector - Gray background with white +/- buttons */
  #cart-drawer .cart-item__quantity,
  #cart-drawer .quantity-selector {
    background: #f3f3f3 !important;
    border-radius: 100px !important;
    padding: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 16px !important;
    width: 123px !important;
    border: none !important;
    height: auto !important;
  }
  
  /* +/- buttons - White circular with shadow */
  .cart-drawer .quantity__button {
    width: 36px !important;
    height: 36px !important;
    background: white !important;
    border-radius: 50% !important;
    border: none !important;
    box-shadow: 1px 1px 20px rgba(0,0,0,0.04) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    color: #1a1a1a !important;
    font-size: 16px !important;
    line-height: 1 !important;
    padding: 0 !important;
  }
  
  /* Quantity input - Inter Medium 14px */
  .cart-drawer .quantity__input {
    background: transparent !important;
    border: none !important;
    width: 30px !important;
    text-align: center !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    outline: none !important;
  }
  
  /* Price styling */
  .cart-drawer .cart-item__price-wrapper,
  .cart-drawer .cart-item__totals {
    text-align: right !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    align-items: flex-end !important;
  }
  
  /* Old price - strikethrough */
  .cart-drawer .cart-item__old-price {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    color: #8C8484 !important;
    text-decoration: line-through !important;
    line-height: 1.4 !important;
  }
  
  /* Final price - green color */
  .cart-drawer .cart-item__final-price,
  .cart-drawer .cart-item__price {
    font-family: 'Sora', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #04ac9c !important;
    text-transform: capitalize !important;
    line-height: 1.4 !important;
  }
  
  /* Remove button as trash icon - top right */
  .cart-drawer .cart-item__remove,
  .cart-drawer .cart-item__delete {
    position: absolute !important;
    right: 0 !important;
    top: 8px !important;
    width: 22px !important;
    height: 22px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
  }
  
  .cart-drawer .cart-item__remove svg,
  .cart-drawer .cart-item__delete svg {
    width: 22px !important;
    height: 22px !important;
    color: #8C8484 !important;
  }
  
  /* Mobile cart items should display normally now that content padding is fixed */
  
  /* Cart summary - REMOVED (conflicted with footer visibility) */
  /*
  .cart-drawer__summary {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: white !important;
    padding: 24px 10px !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1) !important;
    z-index: 50 !important;
    border-top: 1px solid #E5E5E5 !important;
  }
  */
  
  /* Order overview title */
  .cart-drawer .cart-summary h2,
  .cart-drawer .cart-summary__title,
  .cart-drawer .totals__title {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    margin-bottom: 12px !important;
    text-transform: capitalize !important;
    line-height: 1.4 !important;
  }
  
  /* Summary lines */
  .cart-drawer .cart-summary__subtotal,
  .cart-drawer .cart-summary__discount,
  .cart-drawer .totals__subtotal,
  .cart-drawer .totals__discount {
    display: flex !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: #1a1a1a !important;
    text-transform: capitalize !important;
    line-height: 1.4 !important;
  }
  
  /* Discount lines - red color */
  .cart-drawer .cart-summary__discount,
  .cart-drawer .totals__discount {
    color: #f9373f !important;
  }
  
  /* Total section with border */
  .cart-drawer .cart-summary__total,
  .cart-drawer .totals__total {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-top: 16px !important;
    padding-top: 16px !important;
    border-top: 1px solid #E5E5E5 !important;
  }
  
  /* Total label */
  .cart-drawer .cart-summary__total-label,
  .cart-drawer .totals__total-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    text-transform: capitalize !important;
    line-height: 1.4 !important;
  }
  
  /* Total price - green */
  .cart-drawer .cart-summary__total-price,
  .cart-drawer .totals__total-price {
    font-family: 'Inter', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #04ac9c !important;
    text-align: right !important;
    text-transform: capitalize !important;
    line-height: 1.4 !important;
  }
  
  /* VAT and shipping text */
  .cart-drawer .cart-summary__vat,
  .cart-drawer .totals__shipping,
  .cart-drawer .cart-summary small {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    color: rgba(26,26,26,0.5) !important;
    margin-top: 6px !important;
    line-height: 1.4 !important;
  }
  
  /* Green "Order Now" button with cart icon */
  .cart-drawer button[name="checkout"],
  .cart-drawer button[type="submit"][name="checkout"],
  .cart-drawer .cart__checkout-button,
  .cart-drawer .checkout-button,
  .cart-drawer button[name="add"] {
    background: #04ac9c !important;
    color: white !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 14px 40px !important;
    width: 100% !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    margin-top: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    height: 48px !important;
    line-height: 1.6 !important;
  }
  
  /* Add cart icon to button */
  .cart-drawer button[name="checkout"]::after,
  .cart-drawer .cart__checkout-button::after,
  .cart-drawer .checkout-button::after,
  .cart-drawer button[name="add"]::after {
    content: "🛒";
    font-size: 20px;
    line-height: 1;
  }
  
  /* Payment icons row */
  .cart-drawer .payment-icons {
    display: flex !important;
    justify-content: space-between !important;
    margin-top: 24px !important;
    padding: 0 10px !important;
    gap: 8px !important;
  }
  
  .cart-drawer .payment-icons img,
  .cart-drawer .payment-icons svg {
    height: 24px !important;
    width: 38px !important;
    object-fit: contain !important;
    flex-shrink: 0 !important;
  }
  
  /* Special handling for addons/accessories like Castor Wheels */
  .cart-drawer .cart-item.addon {
    margin-top: 0 !important;
  }
  
  .cart-drawer .cart-item.addon .cart-item__image,
  .cart-drawer .cart-item.addon .cart-item__media {
    background: #f8f9fa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .cart-drawer .cart-item.addon .addon-guarantee {
    background: #f3f3f3 !important;
    padding: 5px 10px !important;
    border-radius: 100px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #1a1a1a !important;
    display: inline-block !important;
  }
  
  .cart-drawer .cart-item.addon .cart-item__final-price {
    font-family: 'Sora', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    text-transform: capitalize !important;
  }
  
  /* ===================================
     MOBILE-SPECIFIC OVERRIDES - HIGHEST PRIORITY
     Must come last to ensure these override other rules
     ===================================*/
     
  /* Force correct content padding on mobile */
  #cart-drawer .cart-drawer__content {
    padding-top: 90px !important;
    overflow-y: auto !important;
  }
  
  /* Force correct cart item layout on mobile */
  #cart-drawer .cart-item {
    display: flex !important;
    flex-direction: row !important;
    gap: 16px !important;
  }
  
  /* Force correct cart item details layout on mobile */
  #cart-drawer .cart-item__details {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 !important;
    justify-content: space-between !important;
  }
  
  /* Force correct header layout on mobile */
  #cart-drawer .cart-item__header {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
  }
  
  /* Force correct name display on mobile */
  #cart-drawer .cart-item__name {
    display: block !important;
    flex: 1 !important;
  }
  
  /* Force correct bottom section layout on mobile */
  #cart-drawer .cart-item__bottom {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-top: 8px !important;
  }
}

/* Cart Drawer Styles */
.cart-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 300ms ease, visibility 300ms ease;
  will-change: opacity;
}

.cart-overlay.open {
  opacity: 1;
  visibility: visible;
}

/* Old cart styles removed - using new implementation below */

/* ============================================
   CART DRAWER - PIXEL PERFECT FIGMA IMPLEMENTATION
   ============================================ */

/* Ensure Sora and Inter fonts are loaded */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Sora:wght@400;600;700&display=swap');

/* Cart Drawer Base Styles - Common */
#cart-drawer {
  position: fixed;
  top: 0;
  background: white;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
  contain: layout style paint;
}

#cart-drawer.open {
  transform: translateX(0);
}

/* Mobile Cart Drawer Styles - Full Width */
@media (max-width: 768px) {
  #cart-drawer {
    right: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: -webkit-fill-available !important; /* iOS Safari support */
    height: 100dvh !important; /* Dynamic viewport height - adjusts for browser UI */
    max-height: 100vh !important; /* Fallback */
  }
}


/* Mobile Cart Overlay - Background Color Override */
@media (max-width: 768px) {
  .cart-overlay {
    background: rgba(0,0,0,0.5) !important;
  }
}

/* Desktop Cart Drawer Styles - Figma Perfect */
@media (min-width: 769px) {
  #cart-drawer {
    right: 0 !important;
    width: 448px !important;
    border-radius: 0 !important;
    box-shadow: -1px 4px 20px 0px rgba(0,0,0,0.15) !important;
    margin: 0 !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    top: 0 !important;
  }
}
  
/* Desktop Dark Overlay - Figma Spec */
@media (min-width: 769px) {
  .cart-overlay {
    background: rgba(26,26,26,0.7) !important;
  }
}

/* Desktop Cart Drawer Styles */
@media (min-width: 769px) {  
  /* Adjust internal containers for desktop */
  .cart-drawer__items,
  .cart-drawer__summary,
  .cart-drawer__total,
  .cart-checkout-button,
  .payment-methods {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .cart-drawer__content {
    padding: 20px 32px 20px 32px !important;
  }
  
  .cart-drawer__footer {
    padding: 24px 32px !important;
    padding-bottom: max(24px, env(safe-area-inset-bottom, 24px)) !important;
  }
  
  .cart-drawer__header {
    padding: 24px 32px !important;
    border-bottom: 1px solid #E5E5E5 !important;
    height: auto !important;
  }
  
  .cart-drawer__title {
    font-size: 18px !important;
    font-weight: 400 !important;
  }
  
  /* Fix close button position for desktop padding */
  .cart-drawer__close {
    right: 32px !important;
    z-index: 100 !important;
  }
}

/* Header - Exact Figma Specs */
.cart-drawer__header {
  position: relative;
  padding: 0;
  height: 73px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: white;
}

.cart-drawer__title {
  font-family: 'Sora', sans-serif;
  font-weight: 400;
  font-size: 18px;
  color: #1a1a1a;
  margin: 0;
  text-transform: capitalize;
  line-height: 1.4;
}

.cart-drawer__close {
  position: absolute !important;
  right: 20px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 12px !important;
  height: 12px !important;
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 100 !important;
  visibility: visible !important;
}

.cart-drawer__close svg {
  width: 12px !important;
  height: 12px !important;
  color: #1a1a1a !important;
}

.cart-drawer__close svg path {
  stroke: #1a1a1a !important;
  stroke-width: 1.5 !important;
}

.cart-drawer__close:hover svg path {
  stroke: #666 !important;
}

/* Desktop Close Button Override - Account for 32px padding */
@media (min-width: 769px) {
  .cart-drawer__close {
    right: 32px !important;
  }
}

/* Mobile - Larger clickable area for close button */
@media (max-width: 768px) {
  .cart-drawer__close {
    /* Increase clickable area with padding */
    width: 44px !important;  /* Increased from 12px */
    height: 44px !important; /* Increased from 12px */
    padding: 16px !important; /* Add padding to create larger hit area */
    
    /* Keep other properties */
    position: absolute !important;
    right: 10px !important; /* Adjusted to account for larger size */
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    
    /* Center the icon */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Keep the SVG icon at 12x12 */
  .cart-drawer__close svg {
    width: 12px !important;
    height: 12px !important;
    color: #1a1a1a !important;
  }
}

/* Separator Lines */
.cart-drawer__separator {
  width: calc(100% + 20px);
  height: 1px;
  background: #E5E5E5;
  margin: 0 -10px;
  transform: translateY(-5px);
}

@media (min-width: 769px) {
  .cart-drawer__separator {
    width: calc(100% + 64px);
    margin: 0 -32px;
  }
}

/* Content Area - Figma Layout */
.cart-drawer__content {
  flex: 1;
  overflow-y: auto;
  padding: 20px 10px 0 10px;
  margin: 0;
}

/* Cart Items Container */
.cart-drawer__items {
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 355px;
  width: calc(100% - 20px);
  margin: 0 auto;
}

/* Empty Cart */
.cart-empty {
  text-align: center;
  padding: 40px 20px;
  color: #8c8484;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
}

/* Cart Item - Exact Figma Layout */
.cart-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  position: relative;
  width: 100%;
}

/* Product Image - Exact Figma Specs */
.cart-item__image {
  width: 100px;
  height: 100px;
  border-radius: 5.333px;
  border: 1.333px solid #f3f3f3;
  flex-shrink: 0;
  overflow: hidden;
  background: #f3f3f3;
}

.cart-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.no-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f3f3;
  color: #8c8484;
  font-size: 14px;
}

/* Product Details Container */
.cart-item__details {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100px;
  padding: 8px 0;
}

/* Product Name Row with Delete */
.cart-item__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.cart-item__name {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.4;
  margin: 0;
  text-transform: capitalize;
}

.cart-item__remove {
  width: 22px;
  height: 22px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cart-item__remove svg {
  width: 22px;
  height: 22px;
  color: #8c8484;
}

/* Bottom Row - Quantity and Price */
.cart-item__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Quantity Control - Pill Design Figma */
.cart-item__quantity {
  background: #f3f3f3;
  border-radius: 100px;
  padding: 6px;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 123px;
}

.quantity-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 20px rgba(0,0,0,0.04);
  flex-shrink: 0;
}

.quantity-btn svg {
  width: 15px;
  height: 15px;
  color: #1a1a1a;
}

.quantity-number {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.4;
  text-align: center;
  min-width: 15px;
}

/* Input-specific styles for editable quantity */
.quantity-number[type="number"] {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  width: 30px;
  text-align: center;
  padding: 0;
  margin: 0;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  color: #1a1a1a !important;
  line-height: 1.4 !important;
  -moz-appearance: textfield; /* Hide spinner in Firefox */
}

/* Hide number input spinners in webkit browsers */
.quantity-number[type="number"]::-webkit-outer-spin-button,
.quantity-number[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Focus state for better UX */
.quantity-number[type="number"]:focus {
  background: rgba(26, 26, 26, 0.05) !important;
  border-radius: 4px;
}

/* Price Column - Right Side */
.cart-item__price {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

.cart-item__price-original {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #8c8484;
  line-height: 1.4;
  text-decoration: line-through;
  text-decoration-skip-ink: none;
}

.cart-item__price-sale {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #04ac9c;
  line-height: 1.4;
  text-transform: capitalize;
}

/* Addon Items (Castor Wheels) */
.cart-item--addon .cart-item__details {
  justify-content: center;
  gap: 16px;
}

.cart-item--addon .cart-item__name {
  margin-bottom: 0;
}

.cart-item--addon .cart-item__guarantee {
  background: #f3f3f3;
  border-radius: 100px;
  padding: 5px 10px;
  display: inline-block;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #1a1a1a;
  line-height: 1.4;
  width: fit-content;
}

.cart-item--addon .cart-item__bottom {
  justify-content: flex-end;
}

.cart-item--addon .cart-item__price-free {
  font-family: 'Sora', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #1a1a1a;
  line-height: 1.4;
  text-transform: capitalize;
}

/* Footer Section */
.cart-drawer__footer {
  background: white !important;
  padding: 18px 10px !important;
  padding-bottom: max(18px, env(safe-area-inset-bottom, 18px)) !important;
  width: 100% !important;
  position: sticky !important;
  bottom: 0 !important;
  z-index: 60 !important;
  flex-shrink: 0 !important;
}

/* Order Overview Section */
.cart-drawer__summary {
  max-width: 355px;
  width: calc(100% - 20px);
  margin: 0 auto 16px auto;
}

.cart-summary__title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.4;
  text-transform: capitalize;
  margin: 0 0 12px 0;
}

.cart-summary__details {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cart-summary__line {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-summary__label {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.4;
  text-transform: capitalize;
}

.cart-summary__value {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #1a1a1a;
  line-height: 1.4;
}

/* Discount Lines */
.cart-summary__discount .cart-summary__label,
.cart-summary__discount .cart-summary__value {
  color: #f9373f;
}

/* Total Section */
.cart-drawer__total {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  max-width: 355px;
  width: calc(100% - 20px);
  margin: 16px auto 24px auto;
  padding-top: 16px;
  border-top: 1px solid #E5E5E5;
  position: relative;
}

.cart-drawer__total::before {
  content: '';
  position: absolute;
  top: -1px;
  left: calc(-1 * (100vw - 100%) / 2);
  right: calc(-1 * (100vw - 100%) / 2);
  height: 1px;
  background: #E5E5E5;
}

@media (min-width: 769px) {
  .cart-drawer__total::before {
    left: -22px;
    right: -22px;
  }
}

.cart-total__left {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cart-total__title {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #1a1a1a;
  line-height: 1.4;
  text-transform: capitalize;
}

.cart-total__vat {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: rgba(26, 26, 26, 0.5);
  line-height: 1.4;
}

.cart-total__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
}

.cart-total__price {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #04ac9c;
  line-height: 1.4;
  text-transform: capitalize;
}

.cart-total__shipping {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: rgba(26, 26, 26, 0.5);
  line-height: 1.4;
  white-space: nowrap;
}

/* Order Now Button - Exact Figma */
.cart-checkout-button {
  max-width: 355px;
  width: calc(100% - 20px);
  height: 48px;
  background: #04ac9c;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 auto 24px auto;
  transition: background-color 0.2s;
}

.cart-checkout-button span {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: white;
  line-height: 1.6;
}

.cart-checkout-button svg {
  width: 20px;
  height: 20px;
  color: white;
}

.cart-checkout-button:hover {
  background: #03998a;
}

/* Payment Methods - Single Image */
.payment-methods {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 355px;
  width: calc(100% - 20px);
  margin: 24px auto 0 auto;
}

.payment-logos-image {
  width: 100%;
  max-width: 352px;
  height: auto;
  display: block;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .payment-methods {
    padding: 0 5px;
    margin: 20px auto 0 auto;
  }
  
  .payment-logos-image {
    max-width: 100%;
  }
}

/* ============================================
   MOBILE STICKY ADD TO CART
   ============================================ */

/* Mobile Sticky Add to Cart - Base Styles */
.ergonix-mobile-sticky-cart {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: white;
  padding: 12px;
  box-shadow: 1px 1px 20px 0px rgba(0,0,0,0.15);
  border-radius: 12px 12px 0 0;
  z-index: 999;
  transform: translateY(100%);
  transition: transform 0.3s ease, bottom 0.2s ease;
  margin: 0;
}

.ergonix-mobile-sticky-cart.visible {
  transform: translateY(0);
}

/* Mobile-only display - Follow Ergonix theme pattern */
@media (max-width: 768px) {
  .ergonix-wrapper .ergonix-mobile-sticky-cart,
  .ergonix-mobile-only ~ .ergonix-mobile-sticky-cart,
  .ergonix-body .ergonix-mobile-sticky-cart {
    display: block !important;
  }
}

/* Container styling */
.sticky-cart-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* Price section styling */
.sticky-cart-price {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.price-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.sticky-cart-price .current-price {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #04AC9C;
  line-height: 1.4;
  margin: 0;
}

.sticky-cart-price .original-price {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #8C8484;
  text-decoration: line-through;
  line-height: 1.4;
  margin: 0;
}

.sticky-cart-price .discount-badge {
  background: #04AC9C;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  margin-top: 5px;
}

/* Actions section styling */
.sticky-cart-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

/* Color selector styling */
.sticky-color-selector {
  display: flex;
  gap: 6px;
  align-items: center;
}

.sticky-color-selector .color-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  background-size: cover;
  background-position: center;
  position: relative;
}

.sticky-color-selector .color-dot:hover {
  transform: scale(1.1);
}

.sticky-color-selector .color-dot.active {
  border-color: #04AC9C;
  box-shadow: 0 0 0 2px rgba(4, 172, 156, 0.2);
}

.sticky-color-selector .color-grey {
  background: #CCCCCC;
}

.sticky-color-selector .color-black {
  background: #1a1a1a;
}

/* Order button styling - Matches Figma design */
.sticky-order-btn {
  background: #04AC9C;
  color: white;
  padding: 9px 18px;
  border-radius: 50px;
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.6;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  min-height: 39px;
}

.sticky-order-btn:hover {
  background: #039b8c;
  transform: translateY(-1px);
}

.sticky-order-btn:active {
  transform: translateY(0);
}

/* Safe area handling for iOS */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .ergonix-mobile-sticky-cart {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* ============================================
   DESKTOP STICKY ADD TO CART FUNCTIONALITY
   ============================================ */

/* Desktop Sticky Add to Cart - Base Styles */
.ergonix-desktop-sticky-cart {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%) translateY(150%);
  width: 90%;
  max-width: 1328px;
  background: white;
  border-radius: 8px;
  box-shadow: 1px 4px 20px 0px rgba(0,0,0,0.15);
  padding: 20px 16px;
  z-index: 998;
  transition: transform 0.3s ease;
  margin: 0;
}

.ergonix-desktop-sticky-cart.visible {
  transform: translateX(-50%) translateY(0);
}

/* Desktop-only display */
@media (min-width: 769px) {
  .ergonix-wrapper .ergonix-desktop-sticky-cart,
  .ergonix-desktop-only ~ .ergonix-desktop-sticky-cart,
  .ergonix-body .ergonix-desktop-sticky-cart {
    display: block !important;
  }
}

/* Container styling */
.desktop-sticky-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 100%;
}

/* Product Info Section */
.desktop-sticky-product {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-shrink: 0;
}

.product-thumb-container {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 4.267px;
  overflow: hidden;
}

.product-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4.267px;
  border: 1.067px solid rgba(0,0,0,0.1);
}

.product-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.ergonix-desktop-sticky-cart .product-title {
  font-family: 'Sora', sans-serif;
  font-size: 19px;
  font-weight: 600;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.36px;
}

.price-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.desktop-sticky-product .current-price {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #04ac9c;
  line-height: 1.4;
}

.desktop-sticky-product .original-price {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #8c8484;
  text-decoration: line-through;
  line-height: 1.4;
}

.desktop-sticky-product .discount-badge {
  background: #04ac9c;
  color: white;
  padding: 2px 4px;
  border-radius: 4px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

/* Actions Section */
.desktop-sticky-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

.color-selector-wrapper {
  display: flex;
  align-items: center;
  gap: 16px;
}

.color-label-row {
  display: flex;
  align-items: center;
}

.color-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1a1a1a;
  line-height: 1.4;
}

.color-label strong {
  font-weight: 700;
}

.desktop-sticky-color-selector {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 44px;
}

.desktop-sticky-color-selector .color-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.desktop-sticky-color-selector .color-dot.active {
  border-color: #04ac9c;
  box-shadow: 0 0 0 2px rgba(4, 172, 156, 0.2);
}

.desktop-sticky-color-selector .color-dot:hover {
  transform: scale(1.1);
}

.desktop-sticky-color-selector .color-grey {
  background: #c4c4c4;
}

.desktop-sticky-color-selector .color-black {
  background: #1a1a1a;
}

.stock-status {
  color: #f9373f;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

/* Checkout Button */
.desktop-sticky-checkout-btn {
  background: #04ac9c;
  color: white;
  border: none;
  border-radius: 50px;
  padding: 14px 30px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
  white-space: nowrap;
  line-height: 1.6;
  height: 56px;
  min-width: 179px;
  justify-content: center;
}

.desktop-sticky-checkout-btn:hover {
  background: #039b8c;
  transform: translateY(-1px);
}

.desktop-sticky-checkout-btn:active {
  transform: translateY(0);
}

.cart-icon {
  flex-shrink: 0;
}