/* ========================================
   SPLIT LAYOUT PRODUCTS PAGE STYLES
   ======================================== */

/* Page-specific variables */
:root {
    /* OURS Brand Colors - Sophisticated Balance */
    --ours-primary: #B84A5A;
    --ours-secondary: #D17A8A;
    --ours-accent: #E8A5B5;
    --ours-dark: #991C39;
    
    /* CLIMAX Brand Colors - Dynamic Balance */
    --climax-primary: #D14A42;
    --climax-secondary: #E57A72;
    --climax-accent: #F0A5A0;
    --climax-dark: #BD160E;
    
    /* Professional Neutrals */
    --charcoal-light: #7A7A7A;
    --charcoal-medium: #4A4A4A;
    --charcoal-dark: #222222;
    
    /* Luxury Backgrounds */
    --bg-warm: #F7F7F7;
    --bg-soft: #F0F0F0;
    --bg-light: #E8E8E8;
    --bg-pure: #FFFFFF;
}

/* ========================================
   NEUMORPHIC BUTTONS (PRODUCTS PAGE)
   Match header-style light neumorphism for all buttons on this page.
   ======================================== */
.products-page .category-btn,
.products-page .view-details-btn-split {
    background: linear-gradient(145deg,
        #f7f7f7 0%,
        #e8e8e8 50%,
        #d8d8d8 100%);
    color: var(--color-charcoal, #222);
    box-shadow:
        0.25rem 0.25rem 0.5rem rgba(0, 0, 0, 0.2),
        -0.125rem -0.125rem 0.25rem rgba(255, 255, 255, 0.4),
        inset 0.0625rem 0.0625rem 0.125rem rgba(0, 0, 0, 0.1),
        inset -0.0625rem -0.0625rem 0.125rem rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.products-page .category-btn:hover,
.products-page .view-details-btn-split:hover {
    background: linear-gradient(145deg,
        #ffffff 0%,
        #f0f0f0 50%,
        #e0e0e0 100%);
    color: var(--color-accent-red, #BD160E);
}

.products-page .category-btn:active,
.products-page .view-details-btn-split:active {
    box-shadow:
        0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.2),
        -0.0625rem -0.0625rem 0.125rem rgba(255, 255, 255, 0.3),
        inset 0.125rem 0.125rem 0.25rem rgba(0, 0, 0, 0.2),
        inset -0.125rem -0.125rem 0.25rem rgba(255, 255, 255, 0.2);
}

/* Ensure footer stays at the bottom on the products page */
body.products-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body.products-page main {
    flex: 1 0 auto;
}

body.products-page .footer-placeholder {
    margin-top: 0;
}

/* ========================================
   SPLIT LAYOUT CONTAINER
   ======================================== */

/* Split Layout Container */
.split-layout-container {
    display: flex;
    min-height: 100vh; /* Full viewport height */
    margin-top: 0; /* No top margin - header is fixed and floats above */
    position: relative;
}

/* ========================================
   HEADER VISIBILITY (TOP STATE) - PRODUCTS ONLY
   Make header content dark before scroll so it's visible on white backgrounds.
   ======================================== */
body.products-page .navbar:not(.scrolled) {
    color: #000;
}

body.products-page .navbar:not(.scrolled) .nav-links a,
body.products-page .navbar:not(.scrolled) .nav-link,
body.products-page .navbar:not(.scrolled) .logo,
body.products-page .navbar:not(.scrolled) .lang-toggle,
body.products-page .navbar:not(.scrolled) .dropdown > a,
body.products-page .navbar:not(.scrolled) .dropdown-content a {
    color: #000;
}

body.products-page .navbar:not(.scrolled) .nav-links a:hover,
body.products-page .navbar:not(.scrolled) .nav-links a.active,
body.products-page .navbar:not(.scrolled) .dropdown-content a:hover {
    color: #BD160E; /* accent red for hover/active */
}

/* Keep the Products link black in the initial (top) state to match other links */
body.products-page .navbar:not(.scrolled) .nav-links a.active[href="products.html"] {
    color: #000;
}

/* Brand Partitions - Enhanced spacing */
.brand-partition {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 4rem 3rem;
    position: relative;
}

/* Section separator - subtle divider between logo and filters */
.brand-partition::after {
    content: '';
    position: absolute;
    left: 10%;
    right: 10%;
    top: auto;
    bottom: auto;
    height: 0.0625rem; /* 1px */
    pointer-events: none;
    z-index: 2; /* Above background overlay but below content */
}

/* OURS section separator - white line on red background */
.ours-partition::after {
    top: calc(6.25rem + 1rem); /* Below logo area - 100px = 6.25rem */
    background: linear-gradient(to right,
        transparent 0%,
        rgba(255, 255, 255, 0.2) 20%,
        rgba(255, 255, 255, 0.2) 80%,
        transparent 100%);
}

/* OURS Partition Styling - Solid red matching homepage */
.ours-partition {
    background: var(--color-accent-red); /* #BD160E - Solid red like homepage */
    position: relative;
}

/* OURS Partition subtle overlay for depth (matching blog showcase) */
.ours-partition::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        /* Soft transition overlay */
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(189, 22, 14, 0.1) 90%,
            rgba(189, 22, 14, 0.15) 100%
        ),
        /* Subtle radial overlay for depth */
        radial-gradient(
            ellipse at 50% 50%,
            rgba(189, 22, 14, 0.15) 0%,
            transparent 60%
        );
    pointer-events: none;
    z-index: 0;
}

/* OURS Partition subtle texture (matching blog showcase) */
.ours-partition::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 0.125rem, /* 2px */
            rgba(0, 0, 0, 0.02) 0.125rem,
            rgba(0, 0, 0, 0.02) 0.25rem /* 4px */
        );
    background-size: 1.25rem 1.25rem; /* 20px */
    opacity: 0.3;
    pointer-events: none;
    z-index: 1;
}

/* CLIMAX Partition Styling - Pure white matching homepage */
.climax-partition {
    background: #FFFFFF; /* Pure white like homepage */
    position: relative;
}

/* CLIMAX Partition - No overlays needed, keep it clean white */
.climax-partition::before {
    display: none; /* No overlay for clean white */
}

/* Ensure content is above background overlays */
.ours-partition > *,
.climax-partition > * {
    position: relative;
    z-index: 1;
}

/* Enhanced Dividing Line - Clean transition matching homepage style */
.partition-divider {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 0.0625rem; /* 1px */
    transform: translateX(-50%);
    background: linear-gradient(to bottom, 
        transparent 0%, 
        rgba(255, 255, 255, 0.3) 20%, 
        rgba(255, 255, 255, 0.4) 50%,
        rgba(0, 0, 0, 0.1) 80%, 
        transparent 100%);
    z-index: 2;
    transition: width 0.3s ease, opacity 0.3s ease;
}

/* Subtle pulse animation on divider */
@keyframes dividerPulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 0.8;
    }
}

.partition-divider {
    animation: dividerPulse 4s ease-in-out infinite;
}

/* Divider hover effect - expand slightly */
.split-layout-container:hover .partition-divider {
    width: 0.125rem; /* 2px */
    opacity: 1;
}

/* ========================================
   BRAND LOGO STYLING
   ======================================== */

.brand-logo {
    text-align: center;
    margin-bottom: 2.5rem;
    padding: 1.5rem 0;
    position: relative;
}

.brand-logo img {
    max-width: 21.875rem; /* 350px */
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
    filter: drop-shadow(0 0.25rem 0.75rem rgba(0, 0, 0, 0.1)); /* 4px 12px */
}

/* Brand Tagline Styling - Matching homepage style */
.brand-tagline {
    margin-top: 1rem;
    font-size: clamp(0.875rem, 2vw, 1.1rem); /* Responsive: 14px-17.6px */
    font-weight: 600;
    letter-spacing: 0.03125rem; /* 0.5px */
    line-height: 1.3;
    text-transform: uppercase;
    opacity: 0.9;
    transition: opacity 0.3s ease, transform 0.3s ease;
    font-family: 'Altamis', var(--font-heading), serif;
}

/* OURS tagline - white text on red background */
.ours-partition .brand-tagline {
    color: var(--color-off-white); /* #F7F7F7 - Light text on red */
}

/* CLIMAX tagline - dark text on white background */
.climax-partition .brand-tagline {
    color: var(--color-charcoal); /* #222222 - Dark text on white */
}

/* ========================================
   INTERACTIVE LOGO HOVER SYSTEM
   ======================================== */

/* Interactive Logo Container */
.interactive-logo {
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Logo Hover Text */
.logo-hover-text {
    position: absolute;
    bottom: 1.5rem; /* 24px */
    left: 50%;
    transform: translateX(-50%);
    font-size: clamp(0.75rem, 1.5vw, 0.85rem); /* Responsive: 12px-13.6px */
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none;
}

/* OURS partition - white hover text on red */
.ours-partition .logo-hover-text {
    color: var(--color-off-white);
}

/* CLIMAX partition - dark hover text on white */
.climax-partition .logo-hover-text {
    color: var(--charcoal-medium);
}

/* Interactive Logo Hover States - Enhanced */
.interactive-logo:hover {
    transform: scale(1.08);
}

.interactive-logo:hover img {
    transform: scale(1.05);
    filter: drop-shadow(0 0.5rem 1.25rem rgba(0, 0, 0, 0.15)); /* 8px 20px */
}

.interactive-logo:hover .brand-tagline {
    opacity: 1;
    transform: translateY(-0.125rem); /* -2px */
}

.interactive-logo:hover .logo-hover-text {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0.5rem); /* 8px */
}

/* OURS logo hover glow effect */
.ours-partition .interactive-logo:hover img {
    filter: drop-shadow(0 0.5rem 1.25rem rgba(184, 74, 90, 0.3)); /* 8px 20px */
}

/* CLIMAX logo hover glow effect */
.climax-partition .interactive-logo:hover img {
    filter: drop-shadow(0 0.5rem 1.25rem rgba(209, 74, 66, 0.25)); /* 8px 20px */
}

/* ========================================
   CATEGORY FILTERS
   ======================================== */

/* Category Filters Container - Enhanced spacing */
.category-filters {
    display: flex;
    justify-content: center !important;
    align-items: center;
    gap: clamp(1.5rem, 4vw, 3rem); /* Responsive gap: 24px-48px */
    margin-bottom: clamp(2rem, 5vw, 4rem); /* Responsive margin: 32px-64px */
    padding: clamp(1rem, 3vw, 2rem) 0 clamp(0.75rem, 2vw, 1.5rem); /* Responsive padding */
    flex-wrap: wrap;
    width: 100%;
    position: relative;
    box-shadow: none !important; /* No shadows on container */
    filter: none !important; /* No filter effects */
}

/* All hover effects disabled - filters are completely static */

/* Separator above filters removed - completely disable all pseudo-elements */
.category-filters::before,
.category-filters::after {
    display: none !important;
    content: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    box-shadow: none !important;
    filter: none !important;
    background: none !important;
    border: none !important;
}

/* Category Button Styling - Neumorphism Design */
.category-btn {
    padding: clamp(0.75rem, 2vw, 1rem); /* Responsive padding: 12px-16px */
    border-radius: 50%;
    font-weight: 500;
    cursor: pointer;
    width: clamp(2.75rem, 6vw, 3.75rem); /* Responsive: 44px-60px (meets minimum touch target) */
    height: clamp(2.75rem, 6vw, 3.75rem); /* Responsive: 44px-60px */
    min-width: 2.75rem; /* 44px - minimum touch target (accessibility standard) */
    min-height: 2.75rem; /* 44px - minimum touch target */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: visible;
    outline: none !important; /* No focus outline */
    text-shadow: none !important; /* No text shadows */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Neumorphism base - will be customized per brand */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: clamp(0.0625rem, 0.1vw, 0.125rem) solid rgba(255, 255, 255, 0.5); /* Responsive border */
}

/* Neumorphic reflection overlay */
.category-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(240, 240, 240, 0.2) 25%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(240, 240, 240, 0.2) 75%,
        rgba(255, 255, 255, 0.4) 100%);
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    opacity: 0.6;
}

/* Neumorphic hover effects - subtle elevation */
.category-btn:hover {
    transform: translateY(clamp(-0.0625rem, -0.15vw, -0.125rem)) scale(1.02); /* Responsive slight lift */
    box-shadow: 
        inset clamp(-0.375rem, -1vw, -0.5rem) clamp(-0.375rem, -1vw, -0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(190, 190, 190, 0.3),
        inset clamp(0.375rem, 1vw, 0.5rem) clamp(0.375rem, 1vw, 0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(255, 255, 255, 0.95),
        0 clamp(0.375rem, 0.75vw, 0.5rem) clamp(1.25rem, 2.5vw, 2rem) rgba(0, 0, 0, 0.15); /* Enhanced outer shadow on hover */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.category-btn:focus,
.category-btn:focus-visible {
    outline: 0.125rem solid rgba(189, 22, 14, 0.5);
    outline-offset: 0.125rem;
}

.category-btn:active {
    transform: translateY(0) scale(0.98); /* Pressed effect */
    box-shadow: 
        inset clamp(0.375rem, 1vw, 0.5rem) clamp(0.375rem, 1vw, 0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(190, 190, 190, 0.4),
        inset clamp(-0.375rem, -1vw, -0.5rem) clamp(-0.375rem, -1vw, -0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(255, 255, 255, 0.8),
        0 clamp(0.1875rem, 0.4vw, 0.25rem) clamp(0.75rem, 1.5vw, 1rem) rgba(0, 0, 0, 0.15);
    transition: all 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.category-btn:hover .filter-icon,
.category-btn:focus .filter-icon,
.category-btn:active .filter-icon,
.category-btn:focus-visible .filter-icon {
    transform: none !important;
    filter: inherit !important;
    opacity: 1 !important;
    box-shadow: none !important;
    transition: none !important;
    text-shadow: none !important;
}

/* OURS partition focus states */
.ours-partition .category-btn:focus,
.ours-partition .category-btn:focus-visible {
    outline: clamp(0.125rem, 0.2vw, 0.1875rem) solid rgba(189, 22, 14, 0.5);
    outline-offset: clamp(0.0625rem, 0.1vw, 0.125rem);
}

/* CLIMAX partition focus states */
.climax-partition .category-btn:focus,
.climax-partition .category-btn:focus-visible {
    outline: clamp(0.125rem, 0.2vw, 0.1875rem) solid rgba(255, 255, 255, 0.8); /* White outline on red for better visibility */
    outline-offset: clamp(0.0625rem, 0.1vw, 0.125rem);
}

/* OURS partition - Neumorphic hover effects with black bold border */
.ours-partition .category-btn:hover {
    background: linear-gradient(145deg, #fafafa, #f0f0f0); /* Keep neumorphic background */
    border: clamp(0.125rem, 0.2vw, 0.1875rem) solid #000000 !important; /* Responsive black bold border on hover */
    box-shadow: 
        inset clamp(-0.375rem, -1vw, -0.5rem) clamp(-0.375rem, -1vw, -0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(190, 190, 190, 0.3),
        inset clamp(0.375rem, 1vw, 0.5rem) clamp(0.375rem, 1vw, 0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(255, 255, 255, 0.95),
        0 clamp(0.375rem, 0.75vw, 0.5rem) clamp(1.25rem, 2.5vw, 2rem) rgba(0, 0, 0, 0.15);
}

.ours-partition .category-btn.active:hover {
    background: linear-gradient(145deg, #e8e8e8, #d8d8d8); /* Keep pressed neumorphic background */
    border: clamp(0.125rem, 0.2vw, 0.1875rem) solid #000000 !important; /* Responsive black bold border on hover */
    box-shadow: 
        inset clamp(0.375rem, 1vw, 0.5rem) clamp(0.375rem, 1vw, 0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(190, 190, 190, 0.4),
        inset clamp(-0.375rem, -1vw, -0.5rem) clamp(-0.375rem, -1vw, -0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(255, 255, 255, 0.8),
        0 clamp(0.25rem, 0.5vw, 0.375rem) clamp(1rem, 2vw, 1.25rem) rgba(0, 0, 0, 0.2);
}

/* CLIMAX partition - Neumorphic hover effects with black bold border */
.climax-partition .category-btn:hover {
    background: linear-gradient(145deg, #fafafa, #f0f0f0); /* Keep neumorphic background */
    border: 0.125rem solid #000000 !important; /* Black bold border on hover */
    box-shadow: 
        inset -0.5rem -0.5rem 1.25rem rgba(190, 190, 190, 0.3),
        inset 0.5rem 0.5rem 1.25rem rgba(255, 255, 255, 0.95),
        0 0.5rem 2rem rgba(0, 0, 0, 0.15);
}

.climax-partition .category-btn.active:hover {
    background: linear-gradient(145deg, #e0e0e0, #d0d0d0); /* Light neumorphic background - not filled black */
    border: clamp(0.125rem, 0.2vw, 0.1875rem) solid #000000 !important; /* Responsive black bold border on hover */
    box-shadow: 
        inset clamp(0.375rem, 1vw, 0.5rem) clamp(0.375rem, 1vw, 0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(190, 190, 190, 0.4),
        inset clamp(-0.375rem, -1vw, -0.5rem) clamp(-0.375rem, -1vw, -0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(255, 255, 255, 0.8),
        0 clamp(0.25rem, 0.5vw, 0.375rem) clamp(1rem, 2vw, 1.25rem) rgba(0, 0, 0, 0.2);
}

/* OURS partition buttons - Neumorphism on red background */
.ours-partition .category-btn {
    background: linear-gradient(145deg, #fafafa, #f0f0f0); /* Neumorphic light gray gradient */
    border: clamp(0.0625rem, 0.1vw, 0.125rem) solid rgba(255, 255, 255, 0.5); /* Responsive border */
    color: var(--color-charcoal);
    box-shadow: 
        inset clamp(-0.375rem, -1vw, -0.5rem) clamp(-0.375rem, -1vw, -0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(190, 190, 190, 0.3),
        inset clamp(0.375rem, 1vw, 0.5rem) clamp(0.375rem, 1vw, 0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(255, 255, 255, 0.95),
        0 clamp(0.25rem, 0.5vw, 0.375rem) clamp(1rem, 2vw, 1.5rem) rgba(0, 0, 0, 0.1);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: none !important;
    text-shadow: none !important;
    outline: none !important;
}

/* Neumorphic reflection overlay for OURS */
.ours-partition .category-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(240, 240, 240, 0.2) 25%,
        rgba(255, 255, 255, 0.4) 50%,
        rgba(240, 240, 240, 0.2) 75%,
        rgba(255, 255, 255, 0.4) 100%);
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    opacity: 0.6;
}

/* CLIMAX partition buttons - Red Neumorphism on white background */
.climax-partition .category-btn {
    background: linear-gradient(145deg, #D14A42, #BD160E); /* Red neumorphic gradient - CLIMAX brand red */
    border: clamp(0.0625rem, 0.1vw, 0.125rem) solid rgba(255, 255, 255, 0.3); /* Responsive border */
    color: #FFFFFF; /* White text/icons on red background */
    box-shadow: 
        inset clamp(-0.375rem, -1vw, -0.5rem) clamp(-0.375rem, -1vw, -0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(0, 0, 0, 0.3),
        inset clamp(0.375rem, 1vw, 0.5rem) clamp(0.375rem, 1vw, 0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(255, 255, 255, 0.2),
        0 clamp(0.25rem, 0.5vw, 0.375rem) clamp(1rem, 2vw, 1.5rem) rgba(0, 0, 0, 0.2);
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    filter: none !important;
    text-shadow: none !important;
    outline: none !important;
}

/* Neumorphic reflection overlay for CLIMAX - red theme */
.climax-partition .category-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(145deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 200, 200, 0.1) 25%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 200, 200, 0.1) 75%,
        rgba(255, 255, 255, 0.15) 100%);
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    opacity: 0.5;
}

/* OURS Partition Active Button - Pressed Neumorphism with black bold border */
.ours-partition .category-btn.active {
    background: linear-gradient(145deg, #e8e8e8, #d8d8d8); /* Slightly darker when active */
    border: clamp(0.125rem, 0.2vw, 0.1875rem) solid #000000 !important; /* Responsive black bold border when active */
    border-color: #000000 !important;
    color: var(--color-charcoal);
    box-shadow: 
        inset clamp(0.375rem, 1vw, 0.5rem) clamp(0.375rem, 1vw, 0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(190, 190, 190, 0.4),
        inset clamp(-0.375rem, -1vw, -0.5rem) clamp(-0.375rem, -1vw, -0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(255, 255, 255, 0.8),
        0 clamp(0.1875rem, 0.4vw, 0.25rem) clamp(0.75rem, 1.5vw, 1rem) rgba(0, 0, 0, 0.15); /* Reversed inset for pressed effect */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(0.98); /* Slight press effect */
    filter: none !important;
    text-shadow: none !important;
    outline: none !important;
}

/* CLIMAX Partition Active Button - Pressed Red Neumorphism with black bold border */
.climax-partition .category-btn.active {
    background: linear-gradient(145deg, #BD160E, #991C39); /* Darker red when active */
    border: clamp(0.125rem, 0.2vw, 0.1875rem) solid #000000 !important; /* Responsive black bold border when active */
    border-color: #000000 !important;
    color: #FFFFFF; /* White text/icons on red background */
    box-shadow: 
        inset clamp(0.375rem, 1vw, 0.5rem) clamp(0.375rem, 1vw, 0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(0, 0, 0, 0.4),
        inset clamp(-0.375rem, -1vw, -0.5rem) clamp(-0.375rem, -1vw, -0.5rem) clamp(1rem, 2vw, 1.25rem) rgba(255, 255, 255, 0.15),
        0 clamp(0.1875rem, 0.4vw, 0.25rem) clamp(0.75rem, 1.5vw, 1rem) rgba(0, 0, 0, 0.25); /* Red pressed neumorphism */
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transform: scale(0.98); /* Slight press effect */
    filter: none !important;
    text-shadow: none !important;
    outline: none !important;
}

/* CLIMAX hover effects removed */

/* ========================================
   PRODUCTS DISPLAY AREA
   ======================================== */

/* Products Display Area - Enhanced spacing */
.products-display {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 25rem; /* 400px */
    padding-top: 2rem;
    padding-bottom: 2rem;
}

/* Split Layout Product Grid - Enhanced spacing */
.product-grid-split {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.625rem, 1fr)); /* 250px */
    gap: 3.5rem 2.5rem;
    width: 100%;
    max-width: 100%;
    padding: 1.5rem 0;
    align-items: start;
    justify-items: center;
    grid-auto-rows: minmax(17.5rem, auto); /* 280px */
}

/* Product Image Container (no cards, just images) */
.product-image-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    transition: transform 0.2s ease;
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 0.3rem;
    will-change: transform;
    cursor: pointer !important;
}

.product-image-container:hover {
    transform: scale(1.05);
}

/* Product Image - Layer 2 (normal state) */
.product-image-split {
    position: relative;
    z-index: 5;
}

/* Product Name Label - Minimal, brand-accented caption */
.product-name-label {
    display: block;
    margin-top: 0.6rem;
    background: transparent;
    font-size: clamp(0.875rem, 1.5vw, 0.9rem); /* Responsive: 14px-14.4px */
    font-weight: 500;
    line-height: 1.4;
    font-family: 'Arial', sans-serif;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    padding-bottom: 0.25rem; /* 4px */
    position: relative; /* for underline pseudo-element */
}

/* OURS partition - white text on red background */
.ours-partition .product-name-label {
    color: var(--color-off-white); /* Light text on red */
}

/* CLIMAX partition - dark text on white background */
.climax-partition .product-name-label {
    color: var(--color-charcoal); /* Dark text on white */
}

/* Underline pseudo-element (hidden by default) */
.product-name-label::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 0.125rem; /* 2px */
    width: 0;
    background: transparent; /* set by brand scopes below */
    transition: width 0.25s ease;
}

/* Reveal underline on hover (label or whole container) */
.product-name-label:hover::after,
.product-image-container:hover .product-name-label::after {
    width: 100%;
}

/* Brand-accent underline colors */
.ours-partition .product-name-label::after {
    background: var(--ours-primary);
}

.climax-partition .product-name-label::after {
    background: var(--climax-primary);
}

/* Split Layout Product Images - Use Exact Natural Sizes */
.product-image-split {
    width: auto;
    max-width: none;
    height: auto;
    max-height: 13.75rem; /* 220px */
    object-fit: contain;
    transition: transform 0.2s ease;
    filter: drop-shadow(0 0.5rem 1rem rgba(0, 0, 0, 0.4)); /* 8px 16px */
    will-change: transform;
    position: relative;
    z-index: 5; /* Below hand overlay */
}

.product-image-container:hover .product-image-split {
    transform: scale(1.15);
}

/* No Products Message */
.no-products {
    text-align: center;
    padding: 3rem 1rem;
    font-size: clamp(1rem, 2vw, 1.1rem); /* Responsive: 16px-17.6px */
    line-height: 1.6;
}

/* OURS partition - white text on red */
.ours-partition .no-products {
    color: var(--color-off-white);
}

/* CLIMAX partition - dark text on white */
.climax-partition .no-products {
    color: var(--charcoal-light);
}

.no-products p {
    font-size: 1.1rem;
    margin: 0;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Large Tablets (≤1024px) */
@media (max-width: 1024px) {
    .category-filters {
        gap: clamp(1.25rem, 3vw, 2rem); /* Responsive gap: 20px-32px */
        margin-bottom: clamp(2.5rem, 4vw, 3.5rem); /* Responsive margin: 40px-56px */
        padding: clamp(1.25rem, 2.5vw, 1.75rem) 0 clamp(1rem, 2vw, 1.25rem); /* Responsive padding */
    }
    
    .category-btn {
        width: clamp(3rem, 5.5vw, 3.5rem); /* Responsive: 48px-56px */
        height: clamp(3rem, 5.5vw, 3.5rem); /* Responsive: 48px-56px */
        padding: clamp(0.875rem, 1.75vw, 1rem); /* Responsive padding: 14px-16px */
    }
    
    .filter-icon {
        width: clamp(1.25rem, 2.75vw, 1.375rem); /* Responsive: 20px-22px */
        height: clamp(1.25rem, 2.75vw, 1.375rem); /* Responsive: 20px-22px */
    }
}

/* Responsive Design for Split Layout */
@media (max-width: 768px) {
    .split-layout-container {
        flex-direction: column;
        margin-top: 0; /* No top margin - header is fixed and floats above */
    }
    
    .brand-partition {
        padding: 3rem 1.5rem;
    }
    
    /* Hide section separators on mobile */
    .brand-partition::after {
        display: none;
    }
    
    .partition-divider {
        display: none; /* Hide divider on mobile */
    }
    
    .brand-logo img {
        max-width: 12.5rem; /* 200px */
    }
    
    .brand-tagline {
        font-size: clamp(0.875rem, 2vw, 0.95rem); /* Responsive */
        margin-top: 0.8rem;
    }
    
    /* Interactive Logo Mobile Adjustments */
    .logo-hover-text {
        font-size: clamp(0.7rem, 1.5vw, 0.75rem); /* Responsive */
        bottom: 2.5rem; /* 40px */
    }
    
    /* Mobile Tooltip Adjustments - Removed */
    
    .category-filters {
        gap: clamp(1rem, 2.5vw, 1.75rem); /* Responsive gap: 16px-28px - proper spacing for tablets */
        margin-bottom: clamp(2rem, 4.5vw, 3.5rem); /* Responsive margin: 32px-56px */
        padding: clamp(1rem, 2.5vw, 1.75rem) 0 clamp(0.75rem, 2vw, 1.25rem); /* Responsive padding */
        justify-content: center; /* Ensure filters are centered */
    }
    
    .category-btn {
        width: clamp(2.75rem, 5vw, 3.125rem); /* Responsive: 44px-50px */
        height: clamp(2.75rem, 5vw, 3.125rem); /* Responsive: 44px-50px */
        min-width: 2.75rem; /* 44px - minimum touch target */
        min-height: 2.75rem; /* 44px */
        padding: clamp(0.625rem, 1.5vw, 0.875rem); /* Responsive padding: 10px-14px */
    }
    
    .filter-icon {
        width: clamp(1rem, 2.5vw, 1.25rem); /* Responsive: 16px-20px */
        height: clamp(1rem, 2.5vw, 1.25rem); /* Responsive: 16px-20px */
    }
    
    .product-grid-split {
        grid-template-columns: repeat(auto-fill, minmax(9.375rem, 1fr)); /* 150px */
        gap: 2rem 1rem;
        grid-auto-rows: minmax(11.25rem, auto); /* 180px */
    }
    
    .product-image-split {
        max-height: 9.375rem; /* 150px */
        filter: drop-shadow(0 0.375rem 0.75rem rgba(0, 0, 0, 0.4)); /* 6px 12px */
    }
    
    .product-title-split {
        font-size: 0.9rem;
    }
    
    .view-details-btn-split {
        padding: 0.5rem 0.8rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .brand-partition {
        padding: 2rem 1rem;
    }
    
    /* Hide section separators on small mobile */
    .brand-partition::after {
        display: none;
    }
    
    .brand-logo img {
        max-width: 9.375rem; /* 150px */
    }
    
    .brand-tagline {
        font-size: clamp(0.8rem, 2vw, 0.85rem); /* Responsive */
        margin-top: 0.6rem;
    }
    
    /* Interactive Logo Small Mobile Adjustments */
    .logo-hover-text {
        font-size: clamp(0.65rem, 1.5vw, 0.7rem); /* Responsive */
        bottom: 2.5rem; /* 40px */
    }
    
    .category-filters {
        gap: clamp(1rem, 3vw, 1.5rem); /* Responsive gap: 16px-24px - proper spacing for mobile */
        margin-bottom: clamp(1.5rem, 4vw, 2.5rem); /* Responsive margin: 24px-40px */
        padding: clamp(0.75rem, 2vw, 1.25rem) 0 clamp(0.5rem, 1.5vw, 1rem); /* Responsive padding */
        justify-content: center; /* Ensure filters are centered */
    }
    
    .category-btn {
        width: clamp(2.75rem, 4.5vw, 2.875rem); /* Responsive: 44px-46px (maintains minimum touch target) */
        height: clamp(2.75rem, 4.5vw, 2.875rem); /* Responsive: 44px-46px */
        min-width: 2.75rem; /* 44px - minimum touch target (accessibility standard) */
        min-height: 2.75rem; /* 44px */
        padding: clamp(0.5rem, 1.25vw, 0.75rem); /* Responsive padding: 8px-12px */
    }
    
    .filter-icon {
        width: clamp(0.875rem, 2vw, 1.125rem); /* Responsive: 14px-18px */
        height: clamp(0.875rem, 2vw, 1.125rem); /* Responsive: 14px-18px */
    }
    
    .product-grid-split {
        grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr)); /* 120px */
        gap: 1.5rem 0.8rem;
        grid-auto-rows: minmax(8.75rem, auto); /* 140px */
    }
    
    .product-image-split {
        max-height: 7.5rem; /* 120px */
        filter: drop-shadow(0 0.25rem 0.5rem rgba(0, 0, 0, 0.4)); /* 4px 8px */
    }
    
    .product-title-split {
        font-size: 0.8rem;
    }
    
    .view-details-btn-split {
        padding: 0.4rem 0.6rem;
        font-size: 0.75rem;
    }
}

.filter-icon {
    width: clamp(1.125rem, 3vw, 1.5rem); /* Responsive: 18px-24px */
    height: clamp(1.125rem, 3vw, 1.5rem); /* Responsive: 18px-24px */
    object-fit: contain;
    /* No transitions or hover effects */
    box-shadow: none !important; /* No shadows */
    filter: none; /* Will be overridden by brand-specific filters below */
    transition: none !important; /* No transitions */
    transform: none !important; /* No transforms */
    text-shadow: none !important; /* No text shadows */
}

/* OURS partition icons - dark on white filled circle */
.ours-partition .filter-icon {
    filter: brightness(0.3); /* Dark icons on white background */
    box-shadow: none !important; /* No shadows */
    transition: none !important; /* No transitions */
    transform: none !important; /* No transforms */
    text-shadow: none !important; /* No text shadows */
}

.ours-partition .category-btn.active .filter-icon {
    filter: brightness(0.2); /* Darker when active */
    box-shadow: none !important; /* No shadows */
    transition: none !important; /* No transitions */
    transform: none !important; /* No transform effects */
    text-shadow: none !important; /* No text shadows */
}

/* CLIMAX partition icons - white on red background */
.climax-partition .filter-icon {
    filter: brightness(0) invert(1); /* White icons on red background */
    box-shadow: none !important; /* No shadows */
    transition: none !important; /* No transitions */
    transform: none !important; /* No transforms */
    text-shadow: none !important; /* No text shadows */
}

.climax-partition .category-btn.active .filter-icon {
    filter: brightness(0) invert(1); /* White icons when active - keep white on red */
    box-shadow: none !important; /* No shadows */
    transition: none !important; /* No transitions */
    transform: none !important; /* No transform effects */
    text-shadow: none !important; /* No text shadows */
}

/* ========================================
   ENHANCED TOOLTIP FUNCTIONALITY
   ======================================== */

/* Tooltip Container - Completely disabled */
.category-btn[data-tooltip] {
    position: relative;
}

/* Completely disable all tooltip effects */
.category-btn[data-tooltip]:hover::before,
.category-btn[data-tooltip]:hover::after {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Tooltip hover effects removed */

/* Tooltip arrow hover effects removed */

/* Tooltip show animation removed */

/* Tooltip animation keyframes removed */

/* Brand-specific tooltip hover effects removed */

/* Keyboard navigation tooltip effects removed */

/* Mobile tooltip hover effects removed */