/***************************************/
/*  #P9U  */
/***************************************/
    /*hash section */
    #zlsDiv zlh:first-child,  zlh:first-child {margin-top: -1px;}

    #zlsDiv zlh, zlh {
        /*margin:-0.4rem;*/
        position: sticky;
        top:0rem;
        padding: 0.2rem 0.6rem;
        margin: 0.6rem 0;
        background: #eeeeee;
        display: block;
        width:100%;
        font-weight: bold;
        border-top: 1px solid #c1c1c1;
        border-bottom: 1px solid #c1c1c1;
    }

    zls#zlsDiv.grid3 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        .zli{
            width:30%
        }
    }
    zls#zlsDiv.grid2 {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-evenly;
        .zli{
            padding: 0.6rem 0.2rem;
            width:50%
        }
        .zli-title{
            
            font-size: unset;
                }

    }
/********************************************************/
/*                                                      */
/********************************************************/

    zls,zli{ display: block; }
    .zli-B {
        display: flex;
        flex-direction: row;
        width: -webkit-fill-available;        
    }
    .zli-cmenu{
        font-weight: bold;
        align-self: center;
        /*background: red;*/
        padding: 0.6rem 0.4rem;
        /*font-size:1.1rem;*/
    }

/********************************************************/
/*  zindex                                                */
/********************************************************/
    .zindex{
           /*display: flex;*/
        /*flex-direction: column;*/
        
        .zli { 
            display: flex;
            gap: 0.4rem;
            padding: 0.4rem; 
        }
        .zli:hover {
            background: #e0e0e0;
            border-radius: 0.6rem;
            cursor: pointer;
        }
        
        .zli.active{
            background: #e1e1e1;
            border-left: 2px solid #333;
            /*border-bottom: 1px solid #ccc;*/
        }

        .zli-A img{
            border: 0px  !important;
            display:block;
            background: white;
        }
        .zli-title{
            font-weight: bold;
            /*font-size: 1.1em;*/
            padding: 0.3rem 0px 0.4rem 0px;
        }
        .zli-subTxt{
            color:#404040;
            word-spacing: -0.3rem;
        }

        .zli-A9{display: none;}
    

        .zli-A{
            width:3rem;
            height: 3rem;
            border-radius: 2.5rem;
            overflow: hidden;
            display: flex;
            border: 1px solid #ccc;
            flex-shrink: 0;
        }

        
    }
    #zlsDiv  {  
        
        /*display: flex;*/
        /*flex-direction: column;*/
        .zli { 
            border: 1px solid transparent;
            padding: 0.6rem 0.8rem 
        }
        .zli:hover {
            background: #eee;
            border: 1px solid #c1c1c1;
        }
        /*.zli-A0{
            
        }*/
        .zli-A img{
            border: 1px solid #ccc;
            display:block;
        }

        .zli-title{
            font-weight: bold;
            /*font-size: 1.1em;*/
            padding: 0.3rem 0px 0.4rem 0px;
        }
        .zli-subTxt{
            color:#404040;
            word-spacing: -0.3rem;
        }
        .zli.active{
            background: #eee;
            border-left: 2px solid #333;
            /*border-bottom: 1px solid #ccc;*/
        }
        /* .zli-A0.watched {
           opacity: 0.6; 
        }*/
        .zli-A9{display: none;}
    }


    

    #zlsDiv.ls-default,   .zls-default{
        .zli{
            display: flex;
            gap: 0.4rem;
        }
        .zli-A{
            width:2.5rem;
            height: 2.5rem;
            border-radius: 0.2rem;
            overflow: hidden;
            display: flex;

        }
        
    }
    #zlsDiv.ls-vid, .zls-vid{
        .zli{
            display: flex;
            gap: 0.4rem;
        }
        .zli-A{
            width:40%;
            display: flex;
            min-width: 40%;
            flex-grow: 0;

        }
        
    }

    #zlsDiv.ls-album, .zls-album, .zls-music{
        .zli{
            display: flex;
            padding: 0.6rem 0rem;
            
        }
        
        .zli-A{
            width:40%;
            display: flex;
            flex-shrink: 0;
            margin: 0 0.6rem;

        }
        .zli-A img{
             height: fit-content;;
        }
        
    }

    #zlsDiv.ls-product, .zls-product{
        line-height: 1.1rem;
        .zli {
            padding: 0.6rem;
            display: flex;
            gap: 0.6rem;
        }
        .zli-A img{
        
            
            border: 1px solid #ccc;
            padding: 1rem;
        }
        .zli-title{
            padding:0;
            display: -webkit-inline-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            -webkit-line-clamp: 3;
            /* line-height: 1.5; */
            max-height: 4em;
        }
        .zli-A {
            border: 0px;
            background: white;
            width: 34%;
            flex-shrink: 1;
            flex-grow: 0;
            min-width: 34%;
            aspect-ratio: 1;
            height: fit-content;
            overflow: hidden;
        }
        .action-qty {
            display: flex;
            background: #444;
            
            width: fit-content;
            border-radius: 1rem;
            padding: 0rem 0.4rem;
            gap: 0.4rem;
            color: white;
            font-weight: bold;
            align-items: center;
            
            margin: 0.2rem 0 0.2rem auto;
                
        }.action-qty > *{
            padding: 0.3rem 0.6rem;
        }
        .action-qty-num{
            background: #ffffffdf;
            
            color: #444444;
        }
        

        
        

        .action-qty-rm, .action-qty-num{
            
            display: none;
        }
         
        .action-qty.active > .action-qty-rm, 
        .action-qty.active > .action-qty-num{
            display: block;
        }
    }
   
/********************************************/
/*  ls-img                                  */
/********************************************/
#zlsDiv.img2, #zlsDiv.img3, #zlsDiv.img4 {
    display: flex!important;
    
    flex-direction: row;
    flex-wrap: wrap;
    zli{
        flex-shrink:0;
        padding:0;
        border: none;
    }
    img{border: none;}
    .zli-B{
        display:none;
    }
 
    
 
    .zli:hover {
        position:relative;
        border: none;
        .zli-A::after{
            content:'';
            display:block;
            border:4px solid rgb(255 255 255 / 50%);
            position:absolute;
            top:0px;
            width:100%;
            height:100%;
            box-sizing:border-box;
        }
    }
    

}
#zlsDiv.img2 zli{width:50%;box-sizing: border-box;}
#zlsDiv.img3 zli{ width:33.33%;}
#zlsDiv.img4 zli{ width:25%;}

/***************************************/
/*  zls-Round grid   */
/***************************************/
#zlsDiv.zls-RG, .zls-RG{
           /*display: flex;*/
        /*flex-direction: column;*/
        
        .zli {
            display: inline-flex;
            gap: 0.4rem;
            padding: 0.6rem 0rem;
            flex-direction: column;
            align-items: center;
            text-align: center;
            width:22%;
            overflow: hidden;
            margin-left:1% ;

        }

        .zli-cmenu{
         
            display:none;
         
        }
        .zli-A img{
            border: 0px  !important;
            display:block;
            background: white;
        }
        .zli-title{
            font-weight: bold;
            font-size: 0.7rem;  /*desktop mode use 0.8rem */
            padding: 0px;
            word-break: break-word;
        }
        .zli-subTxt{
            display:none;
        }

        .zli-A9{display: none;}
    

        .zli-A{
            width:3.5rem;
            height: 3.5rem;
            border-radius: 2.5rem;
            overflow: hidden;
            display: flex;
            border: 1px solid #ccc;
            flex-shrink: 0;
        }

        
    }