/* --- ISOLATED CONTAINER STYLES --- */
        /* All styles below are scoped to this unique ID to prevent global clashes */
        #positive-effect-showcase {
            /* --- LOCAL CSS VARIABLES (Encapsulated) --- */
            --color-primary: #10B981; /* Green (Used for header and nav buttons) */
            --color-primary-dark: #059669; /* Darker Green for hover */
            --color-text-dark: #4B5563; /* Gray */
            --font-inter: 'Inter', sans-serif; /* Fallback to sans-serif */
            --space-sm: 1rem;
            --space-md: 1.5rem;
            --space-lg: 2.5rem;
            --space-xl: 3rem;
            
            /* Applying the font and minimum height directly to the isolated container */
            font-family: var(--font-inter);
            min-height: 100vh;

            /* Keyframe Animation for Background */
            animation-name: color-shift;
            animation-duration: 10s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-timing-function: ease-in-out;
            
            background-color: #2d86dd; /* Initial yellow background */
            
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Keyframe Animation for Background Color */
        @keyframes color-shift {
            0% { background-color: #FFFF00; } /* Yellow */
            50% { background-color: #90EE90; } /* Light Green */
            100% { background-color: #FFFF00; } /* Back to Yellow */
        }
        
        /* --- Global Layout and Responsiveness --- */
        #positive-effect-showcase .pe-section {
            /* Padding for horizontal fluid width on mobile */
            padding: 0 var(--space-sm);
            width: 100%; 
            max-width: 1280px;
        }
        
        #positive-effect-showcase .pe-content-wrapper {
            width: 100%;
            margin-left: auto;
            margin-right: auto;
        }

        /* --- Section Header --- */
        #positive-effect-showcase .pe-section-header {
            text-align: center;
            /* Adaptive margins */
            margin: 0 auto var(--space-xl) auto; 
            max-width: 32rem; 
        }

        #positive-effect-showcase .pe-subtitle {
            font-size: 1.125rem;
            font-weight: 600;
            color: var(--color-primary);
            margin-bottom: 0.5rem;
            font-family: var(--font-inter); 
        }

        #positive-effect-showcase .pe-main-title {
            font-size: 2.25rem;
            line-height: 1.25;
            font-weight: 800;
            color: var(--color-text-dark);
            font-family: var(--font-inter); 
        }

        @media (min-width: 768px) {
            #positive-effect-showcase .pe-main-title {
                font-size: 3rem; /* Larger font on desktop */
            }
        }
        
        /* --- Carousel Container --- */
        #positive-effect-showcase .pe-carousel {
            display: flex;
            overflow-x: scroll; /* Enables horizontal scrolling on small screens */
            padding: var(--space-md) 0;
            gap: 1.5rem; 
            -ms-overflow-style: none; /* Hide scrollbar for IE/Edge */
            scrollbar-width: none; /* Hide scrollbar for Firefox */
            cursor: grab;
            scroll-behavior: smooth;
            user-select: none;
            scroll-snap-type: x mandatory; /* Smooth snapping on scroll stop */
            justify-content: flex-start;
        }
        
        #positive-effect-showcase .pe-carousel::-webkit-scrollbar {
            display: none; /* Hide scrollbar for Chrome/Safari */
        }
        #positive-effect-showcase .pe-carousel.pe-active-dragging {
            cursor: grabbing !important;
        }

        /* --- Product Card Item (The main wrapper for image + text) --- */
        #positive-effect-showcase .pe-item {
            flex-shrink: 0;
            width: 200px;
            max-width: 90vw; /* Ensures it shrinks on very small viewports */
            position: relative;
            z-index: 1;
            cursor: pointer;
            scroll-snap-align: center;
            background-color: transparent;
            border-radius: 0;
            border: none;
            box-shadow: none;
            text-decoration: none;
            display: flex;
            flex-direction: column;
            align-items: center;
            transition: all 0.2s ease;
        }
        
        /* --- Image Styling (User Image Placement) --- */
        #positive-effect-showcase .pe-image-wrapper {
            width: 100%;
            height: 250px; /* Default height */
            display: flex;
            align-items: center;
            justify-content: center;
            padding-bottom: 1rem; 
        }
        
        #positive-effect-showcase .pe-bottle-img {
            width: 100%; 
            max-width: 150px; 
            height: 250px; /* Default height */
            object-fit: contain; 
            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.4));
            transition: all 0.3s ease;
        }

        /* Fluid Design Improvement: Adjust height for limited vertical space (e.g., landscape mobile) */
        @media (max-height: 500px) {
            #positive-effect-showcase .pe-image-wrapper {
                height: 180px; 
            }
            #positive-effect-showcase .pe-bottle-img {
                height: 180px;
            }
        }
        
        #positive-effect-showcase .pe-item:hover .pe-bottle-img {
            transform: scale(1.05); /* Grow slightly on hover */
        }


        /* --- Product Details Section (The unique colored button) --- */
        #positive-effect-showcase .pe-item-details {
            /* Uses inline custom properties for fill and border: --btn-color */
            border: 1px solid rgba(255, 255, 255, 0.3); 
            
            /* Color Fading Gradient Grading */
            background: linear-gradient(135deg, var(--btn-color) 0%, var(--btn-color-dark) 100%);
            
            padding: 0.5rem 0.75rem;
            text-align: center;
            border-radius: 9999px; /* Pill shape */
            margin-top: 0.5rem;
            flex-grow: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 40px;
            width: 150px; 
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            cursor: pointer;
            
            /* Soft shadow and inner highlight */
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.3); 
        }
        
        /* UI Principle: Hover Feedback (Styling) */
        #positive-effect-showcase .pe-item:hover .pe-item-details {
            filter: brightness(0.9); 

            /* Deeper shadow and more pronounced lift/scale */
            box-shadow: 
                0 8px 20px rgba(0, 0, 0, 0.25), 
                inset 0 1px 0 rgba(255, 255, 255, 0.4); 
            transform: translateY(-4px) scale(1.05); 
        }

        #positive-effect-showcase .pe-item-name {
            font-size: 0.9rem;
            font-weight: 700; 
            color: white; 
            margin: 0;
            line-height: 1;
            /* Added: Text shadow for pop */
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
        }
        
        /* --- Navigation Buttons (Prev/Next) --- */
        #positive-effect-showcase .pe-nav-buttons {
            display: flex;
            justify-content: center;
            margin-top: 2rem;
            gap: 1.5rem;
        }
        
        #positive-effect-showcase .pe-nav-btn {
            padding: 0.75rem;
            background-color: #0A2814;
            color: white; 
            border: none;
            border-radius: 50%; 
            box-shadow: 0 4px 8px rgba(16, 185, 129, 0.4); 
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            cursor: pointer;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        #positive-effect-showcase .pe-nav-btn:hover {
            background-color: #FFCC00;
            transform: scale(1.15); 
        }
        
        #positive-effect-showcase .pe-nav-btn:focus {
            outline: none;
            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.6); 
        }
        
        #positive-effect-showcase .pe-nav-btn svg {
            width: 24px;
            height: 24px;
            stroke: white; 
            stroke-width: 2;
        }