.ic-container-ef008db6 {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    user-select: none;
    background: #eee;
    /* Aspect ratio fallback or container setup */
    display: flex;
}
.ic-container-ef008db6 img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.ic-image-wrapper-ef008db6 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
/* The before image establishes the container height */
.ic-before-ef008db6 {
    position: relative;
    width: 100%;
    height: auto; 
}
.ic-after-ef008db6 {
    width: 50%; /* Initial crop state */
    /* Crop using clip-path or width, width is standard for this. We must ensure the inner image does not shrink */
}
/* Crucial: The image inside the 'after' wrapper MUST be the exact same size as the 'before' image, not 50% width */
.ic-after-ef008db6 img {
    width: 100vw; /* fallback */
    max-width: none;
}
.ic-container-ef008db6.ready .ic-after-ef008db6 img {
    /* We will set the width of this image via JS to match the container exactly, so cropping the wrapper reveals it */
}

/* Labels */
.ic-label-ef008db6 {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,0.5);
    color: #fff;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 14px;
    z-index: 10;
}
/* Move labels to the container level visually by positioning them relative to wrappers but independent of crop */
.ic-before-ef008db6 .ic-label-left-ef008db6 { left: 20px; }
/* For the right label, we position it relative to the right edge of the FULL image width, not the cropped wrapper */
.ic-after-ef008db6 .ic-label-right-ef008db6 { 
    /* Right position is tricky if wrapper shrinks. Best to attach it to the image or handle in JS. */
    right: 20px;
    /* To prevent it moving when cropped, we can switch to clip-path instead of width shrinking */
}

/* Let's change the cropping method to clip-path for smoother and perfect size match */
.ic-after-ef008db6 {
    width: 100%; /* Full width wrapper */
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); /* Initial crop */
}
.ic-after-ef008db6 img {
    width: 100%; /* Matches exactly */
    height: 100%;
}
.ic-after-ef008db6 .ic-label-right-ef008db6 { 
    right: 20px; /* Now it's stable because wrapper is 100% wide */
}


.ic-handle-wrapper-ef008db6 {
    position: absolute;
    top: 0;
    left: 50%;
    width: 40px;
    height: 100%;
    transform: translateX(-50%);
    cursor: ew-resize;
    z-index: 20;
}
.ic-slider-ef008db6 {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #fff;
    transform: translateX(-50%);
}
.ic-handle-ef008db6 {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background: #fff;
    color: #333;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0,0,0,0.3);
}