#P9D{
    padding: 0 0.6rem 0.6rem 0.6rem;
    display: flex;
    gap:0.6rem;
}
#P9D_B[data-active="1"] {    font-weight:bold;}

#P9D_U{
    &.breadcrumb {gap: 0;}
    .active{font-weight:bold;}
    
    span:hover{
        cursor:pointer;
        font-weight:bold;
    }
        
    &::-webkit-scrollbar {
        /*display: none;*/
        width: 0;
        height: 0;   
    }
}

#P9D_U {
    flex-grow: 1;
    display: flex;
    gap:0.6rem;
    overflow-x: auto;
    white-space: nowrap;
    scroll-behavior: smooth;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* IE 10+ */
            
    /* SHADOW LOGIC */
    /* 1 & 2: White 'covers' that move with content (local) */
    /* 3 & 4: Dark shadows that stay fixed (scroll) */
    
    /* SHADOW LOGIC USING LINEAR GRADIENTS */
	background:
	    /* 1. Left White Cover (matches background) */
	    linear-gradient(to right, white 20%, rgba(255, 255, 255, 0)),
	    /* 2. Right White Cover (matches background) */
	    linear-gradient(to left, white 20%, rgba(255, 255, 255, 0)) 100% 0,
	    /* 3. Left Shadow (Linear) */
	    linear-gradient(to right, rgba(0, 0, 0, 0.7), transparent),
	    /* 4. Right Shadow (Linear) */
	    linear-gradient(to left, rgba(0, 0, 0, 0.7), transparent) 100% 0;   
    
    background-repeat: no-repeat;
    /* Size: Covers are wider (50px), Shadows are thinner (15px) */
    background-size: 50px 100%, 50px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
}