/* ===========================================
   JAR LID
   Metallic cap that sits on top of the neck
   
   Position calculated from --jar-lid-top
   Overlaps with neck opening
   =========================================== */

.jar-lid {
    position: absolute;
    top: var(--jar-lid-top);
    left: 50%;
    transform: translateX(-50%);
    width: var(--jar-lid-width);
    height: var(--jar-lid-height);
    background: linear-gradient(180deg, 
        rgba(140, 140, 160, 0.95) 0%, 
        rgba(100, 100, 120, 0.95) 40%,
        rgba(70, 70, 90, 0.95) 100%);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 10px 10px 4px 4px;
    box-shadow: 
        0 3px 10px rgba(0, 0, 0, 0.4),
        inset 0 2px 4px rgba(255, 255, 255, 0.25),
        inset 0 -2px 4px rgba(0, 0, 0, 0.2);
    z-index: 10; /* Topmost element */
}

.jar-lid-grip-ridges {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 4px;
    background: repeating-linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.1) 0px,
        rgba(255, 255, 255, 0.1) 3px,
        transparent 3px,
        transparent 6px
    );
    border-radius: 2px;
}