.beer-slider {
    display: inline-block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
    /* Force height */
}

.beer-slider *,
.beer-slider:before,
.beer-slider:after,
.beer-slider *:before,
.beer-slider *:after {
    box-sizing: border-box;
}

.beer-slider img {
    vertical-align: bottom;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Fill container */
}

.beer-reveal {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
    opacity: 0;
}



.beer-handle {
    position: absolute;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    background: #fff;
    color: #000;
    transition: opacity 0.2s ease-in-out;
    transform: translateX(-50%);
    height: 100%;
    /* Full height line */
    width: 2px;
    /* Thin line */
    left: 50%;
    top: 0;
}

.beer-handle:before,
.beer-handle:after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    top: 50%;
    border-top: 2px solid;
    border-left: 2px solid;
    transform: rotate(-45deg);
}

.beer-handle:before {
    left: -12px;
    margin-top: -5px;
}

.beer-handle:after {
    right: -12px;
    margin-top: -5px;
    transform: rotate(135deg);
}

.beer-ready .beer-reveal,
.beer-ready .beer-handle {
    opacity: 1;
}

/* Custom styling for handle circle */
.beer-handle {
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}

/* Hide default arrows of BeerSlider and use FontAwesome or similar if needed, 
   but BeerSlider has its own CSS arrows. 
   Let's override them to match our design or just use the circle. */
.beer-handle:before,
.beer-handle:after {
    border-color: var(--color-primary, #3b82f6);
}

/* The vertical line */
.beer-slider::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    /* Full height */
    left: var(--position, 50%);
    /* Needs JS update or just use the handle's position? 
       BeerSlider doesn't use a pseudo-element for the line by default in this CSS? 
       Wait, the original CSS had a line. 
       Let's add our own line attached to the handle. */
}

.beer-handle::before,
.beer-handle::after {
    /* Adjust arrows to be inside the circle */
    width: 6px;
    height: 6px;
    border-width: 2px;
}

.beer-handle::before {
    left: 8px;
}

.beer-handle::after {
    right: 8px;
}

/* Add a vertical line through the handle */
.beer-reveal {
    border-right: 1px solid rgba(255, 255, 255, 0.6);
}