/* Container is already flex from Blade */
.eric-preview .eric-volume {
    width: 48px; /* ← pick your size (try 48px) */
    min-width: 48px;
    flex: 0 0 48px; /* don't grow or shrink */
    height: 18px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    overflow: visible;
}

@media (max-width: 576px) {
    .eric-preview .eric-volume {
        width: 40px; /* smaller on phones */
        min-width: 40px;
        flex-basis: 40px;
    }
}

/* tighten space between button and slider */
.eric-preview {
    gap: 0.35rem;
} /* was Tailwind gap-2 (~0.5rem) */

/* Track */
.eric-preview .eric-volume::-webkit-slider-runnable-track {
    height: 4px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.45);
}
.eric-preview .eric-volume::-moz-range-track {
    height: 4px;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.45);
}

/* Thumb */
.eric-preview .eric-volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    border-radius: 9999px;
    background: #fee240;
    border: 1px solid rgba(0, 0, 0, 0.4);
}
.eric-preview .eric-volume::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 9999px;
    background: #fee240;
    border: 1px solid rgba(0, 0, 0, 0.4);
}