/* Main Section Container */
.view-products {
    min-height: 500px;/* Reduced from 600px */
    position: relative;
    overflow: hidden;
    display: block; /* Always visible */
    background-color: #f5f5f5; /* Fallback bg */
}

/* Placeholder Area */
.view-products-placeholder {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    /* Removed background image as requested */
    background: transparent !important;
    z-index: 10; /* Above layout initially */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: none; /* Removed hover effect */
    pointer-events: none; /* Let clicks pass through, just visual */
}

/* Hint Box Styling (Styled like tech-spec-panel) */
.view-products-hint-panel {
    position: absolute;
    top: -110px; /* Moved up from 50% */
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff; /* White background for cleaner look */
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 50px; /* Pill shape */
    padding: 15px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    z-index: 20; /* Highest priority */
    pointer-events: auto;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08); /* Soft shadow for lift */
    white-space: nowrap;
}

.view-products-hint-panel h3 {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 800;
    margin: 0;
    letter-spacing: 1px;
    color: var(--main-color); /* Brand Blue */
    padding-right: 20px;
    border-right: 1px solid rgba(0,0,0,0.1);
    text-transform: uppercase;
}

.view-products-hint-panel .subtle-hint {
    margin: 0;
    color: #666; /* Dark gray */
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.view-products-hint-panel .subtle-hint .highlight {
    color: var(--main-color); /* Brand Blue */
    font-weight: 700;
    font-style: normal;
}

/* Placeholder Right Image */
.placeholder-image-right {
    position: absolute;
    right: -230px;
    top:100px;
    height: 90%; /* Adjust to fit nicely, maybe not full height to avoid cutting? */
    width: auto;
    z-index: 1;
    display: flex;
    align-items: flex-end;
    pointer-events: none;
}

.placeholder-image-right img {
    object-fit: contain;
    width: 1350px; /* Limit width */
}

/* Removed hover zoom */
.view-products:hover .view-products-placeholder {
    transform: none;
}

/* Removed Dark Overlay */
.view-products-placeholder .placeholder-overlay {
    display: none;
}

.view-products:hover .view-products-placeholder .placeholder-overlay {
    background: none;
}

.view-products-placeholder .placeholder-content {
    background: transparent;
    padding: 0;
    text-align: center;
    box-shadow: none;
    max-width: 800px;
    position: relative;
    z-index: 2;
    transform: none; /* Removed animation */
    transition: none;
}

.view-products:hover .view-products-placeholder .placeholder-content {
    transform: none;
}

/* Subtle Hint Style */
.subtle-hint {
    font-family: var(--font-body);
    font-size: 14px;
    color: #999; /* Muted gray */
    letter-spacing: 0.5px;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 10px;
    opacity: 0.7; /* Semi-transparent */
}

.subtle-hint i {
    font-size: 16px;
    color: #ccc;
}

.subtle-hint .highlight {
    font-weight: 600;
    color: #666; /* Slightly darker for emphasis */
    font-style: italic;
}

/* Left Column: 1/3 Width */
.view-products-layout {
    display: flex;
    height: 100%;
    width: 100%;
    position: relative;
    z-index: 5; /* Lower than placeholder initially */
    transition: z-index 0s linear 0.6s; /* Delay z-index change on close */
}

.view-products-layout.active {
    z-index: 20; /* Above placeholder when active */
    transition: z-index 0s linear 0s; /* Immediate z-index change on open */
}

/* Background Animation Layer */
.view-products-bg-anim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Above background colors, below content */
    pointer-events: none; /* Let clicks pass through */
    overflow: hidden;
}

.view-products-bg-anim .area-shape-1 {
    width: 100%; /* Auto width based on container, but let image dictate aspect */
    max-width: 800px; /* Limit max size */
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    z-index: 1;
    opacity: 0.6; /* Slight transparency */
}

.view-products-bg-anim .area-shape-1 img {
    width: 100%;
    height: auto;
    display: block;
    /* Optional: reused animation from about section if available globally */
    /* animation: t-SlideBottom 6s infinite; */
}

.series-preview-col {
    width: 25%;
    position: relative;
    /* background-color: var(--black-2); Removed to allow bg to show through or handle differently */
    background-color: transparent; /* Make transparent so we can handle bg in layout or separate layer */
    overflow: hidden;
    height: 100%;
    z-index: 10;
}

/* We need a background layer for the Left Col specifically if it needs a dark base */
.series-preview-col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--black-2);
    z-index: -1;
}

.preview-image-box {
    width: 100%;
    height: 100%;
    position: relative;
    background-position: left bottom;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1; /* Above the dark bg */
}

/* ... existing preview-overlay ... */

/* Right Column: Full Width with Indentation */
.products-list-col {
    width: 100%;
    /* 
       Updated Padding:
       - Top: 60px
       - Right: 0 (Let children decide, allowing Carousel to be full width)
       - Bottom: 40px
       - Left: 0 (Moved indentation to children to allow overflow)
    */
    padding: 60px 0 120px 0; 
    display: flex;
    flex-direction: column; /* Stack Header and Carousel */
    justify-content: flex-start; /* Align content to top */
    background-color: transparent; /* Changed from #fff to transparent for bg anim visibility */
    overflow: visible; /* Allow carousel items to slide into left area */
    position: relative;
    height: 100%; /* Ensure full height */
    z-index: 10;
}

/* Left Blur Overlay - REMOVED (Replaced by per-item styling) */

/* Add a pseudo-element for the white background to allow transparency control if needed, 
   or just put it behind content but above global bg */
.products-list-col::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.products-header {
    margin-bottom: 25px;
    padding-left: 25%; /* Align header with carousel start */
    /* 
       Apply the dynamic padding ONLY to the header 
       to align buttons with the .auto-container right edge
    */
    padding-right: max(40px, calc(50vw - 600px));
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.products-header h3 {
    font-size: 32px;
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
}

.products-carousel-wrapper {
    width: 100%;
    position: relative;
    padding-left: 25%; /* Align carousel active area start */
    overflow: visible; /* Allow stage to overflow */
}

/* Allow Owl Carousel Items to overflow left */
.products-carousel-wrapper .owl-carousel {
    overflow: visible;
}

.products-carousel-wrapper .owl-stage-outer {
    overflow: visible;
}

/* Navigation Buttons (Top Right) */
.view-products-nav {
    display: flex;
    gap: 10px;
    align-items: center;
    padding-left: 20px; /* Add padding to separate from close button group if needed, or generally */
}

.nav-btn {
    width: 40px;
    height: 40px;
    border: 1px solid #E5E5E5;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #1a1a1a;
}

.nav-btn:hover {
    background: var(--main-color);
    border-color: var(--main-color);
    color: #fff;
}

.nav-btn svg {
    width: 12px;
    height: 12px;
}

/* Close Button Specific Style */
.nav-btn.close-btn {
    margin-left: 10px; /* Separate close button from nav arrows */
}

/* Removed prev/next specific positioning as they are now in flow */

/* Swiper Styles - Scoped to .products-swiper */
.products-swiper {
    width: 100%;
    height: 100%;
    overflow: visible !important; /* Allow overflow */
    padding-left: 0;
}

.products-swiper .swiper-slide {
    width: auto !important; /* Allow auto width based on content */
    height: auto;
    transition: all 0.5s ease;
    /* Default State: Blurred (Left of active) */
    opacity: 0.1;
    filter: blur(5px);
}

/* Active and Future Slides State: Clear */
.products-swiper .swiper-slide-active,
.products-swiper .swiper-slide-active ~ .swiper-slide {
    opacity: 1;
    filter: blur(0);
}

/* Fix for Loop Duplicate edge cases:
   If duplicates at the end become visible but are technically 'after' active in DOM, they are clear. Correct.
   If duplicates at start become visible (when scrolling left to start), they are 'before' active.
   Wait, if we are at index 0, the active slide is index 0. 
   The duplicates at the beginning (swiper-slide-duplicate) are physically before index 0 in DOM?
   No, Swiper usually puts duplicate-end at start, and duplicate-start at end.
   Structure: [Dup-End] [1] [2] [3] [Dup-Start]
   
   If Active is [1], then [Dup-End] is before it -> Blurred. Correct.
   If Active is [Dup-Start] (momentarily before jump), then [1][2][3] are before it -> Blurred. Correct.
   
   There is one edge case: When wrapping from 1 to End (scrolling left), 
   we might see the right side of [Dup-End]. 
   But since we want everything to the LEFT of active to be blurred, this logic holds.
*/

/* Product Card - Horizontal Mode */
.product-card-slide.horizontal-mode {
    width: 300px; /* Fixed width */
    max-width: none;
    height: 440px;
    margin: 0;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
    border: 1px solid var(--border-light);
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.product-card-slide.horizontal-mode:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    border-color: var(--main-color);
}

.product-card-slide.horizontal-mode .image-box {
    width: 100%;
    height: 200px; /* Slightly taller */
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 5px;
    position: relative;
}

.product-card-slide.horizontal-mode .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.product-card-slide.horizontal-mode:hover .image-box img {
    transform: scale(1.1);
}

/* Add an overlay effect on hover */
.product-card-slide.horizontal-mode .image-box::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.0);
    transition: background 0.3s;
    pointer-events: none;
}

.product-card-slide.horizontal-mode:hover .image-box::after {
    background: rgba(0,0,0,0.05);
}

.product-card-slide.horizontal-mode .content-box {
    width: 100%;
}

.product-card-slide.horizontal-mode .content-box h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--title-color);
    transition: color 0.3s;
}

.product-card-slide.horizontal-mode:hover .content-box h3 {
    color: var(--main-color);
}

.product-card-slide.horizontal-mode .content-box p {
    font-size: 14px;
    color: var(--text-color);
    line-height: 1.5;
    margin-bottom: 15px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 63px; /* 3 lines * 21px line-height approx */
}

.product-card-slide.horizontal-mode .theme-btn-wrapper {
    margin-top: auto; /* Push button to bottom */
    width: 100%;
    height: 44px; /* Fixed height for consistency */
}

.product-card-slide.horizontal-mode .theme-btn {
    padding: 10px 24px;
    font-size: 13px;
    border-radius: 6px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    width: 100%; /* Full width button */
    text-align: center;
}

/* View Products Hint Tooltip Removed */

/* Auto Color Switch Animation Class */
.btn-style-white-blue.auto-switch {
    animation: btnColorSwitch 4s infinite;
}

@keyframes btnColorSwitch {
    0%, 45% {
        /* Default State (White bg, Blue text) */
        color: var(--main-color);
        background: #ffffff;
        border-color: rgba(255,255,255,0.2);
    }
    50%, 95% {
        /* Hover State (Blue bg, White text) */
        color: #ffffff;
        background: var(--main-color);
        border-color: var(--main-color);
    }
    100% {
        /* Reset to Default */
        color: var(--main-color);
        background: #ffffff;
        border-color: rgba(255,255,255,0.2);
    }
}

/* Ensure inner spans inherit color correctly during animation */
.btn-style-white-blue.auto-switch .btn-wrap .text-one,
.btn-style-white-blue.auto-switch .btn-wrap .text-two {
    color: inherit;
}

/* Helper Class for JS Interaction */
.process-2-area-inner.pb-0 {
    padding-bottom: 0 !important;
    transition: padding-bottom 0.5s ease;
}

/* Active State for View Products Button */
.btn-style-slide.btn-style-white-blue.active {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.btn-style-slide.btn-style-white-blue.active .btn-wrap .text-one {
    color: var(--white-color);
}

.btn-style-slide.btn-style-white-blue.active i {
    background-color: var(--white-color);
    color: var(--main-color);
}

/* Active State for Process Box - Extended to Hover */
.process-2-box {
    transition: border-color 0.3s ease;
}

.process-2-box .number {
    transition: all 0.3s ease;
}

.process-2-box .thumb img {
    transition: transform 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.process-2-box:hover,
.process-2-box.active-box {
    border-color: var(--main-color) !important;
}

.process-2-box:hover .number,
.process-2-box.active-box .number {
    background-color: var(--main-color) !important;
    color: var(--white) !important;
    border-color: var(--main-color) !important;
}

.process-2-box:hover .thumb img {
    transform: scale(1.1);
}

/* Responsive Styles */
@media (max-width: 991px) {
    .view-products {
        display: none !important;
    }
}
/* Background Shape Decoration */
.view-products-bg-shape {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Float above columns */
    pointer-events: none; /* Allow clicks to pass through */
    overflow: hidden;
}

.view-products-bg-shape .area-shape-1 {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.view-products-bg-shape img {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: auto;
    max-width: none;
    animation: t-SlideBottom 6s infinite ease-in-out;
}

@keyframes t-SlideBottom {
    0% { transform: translateY(0); }
    50% { transform: translateY(30px); }
    100% { transform: translateY(0); }
}