/* Category Styling */
    /* Category Board */
        .CategoryBar    {
                            width: 100%;
                            background-color: transparent;
                            padding: 36px 0 36px 0;
                        }
            .CategoryHeaderBar  {
                                    margin-bottom: 8px;
                                    display: flex;
                                    flex-direction: row;
                                    align-content: center;
                                    align-items: center;
                                    justify-content: space-between;
                                    padding: 0 0 0 0;
                                }
                .CategoryHeaderTitle    {
                                            font-size: 36px;
                                            font-family: 'Playfair Display', serif;
                                            color: var( --white-color );
                                        }
                .CategoryHeaderViewButton   {
                                                font-weight: bold;
                                                color: white; 
                                                background-color: transparent;
                                                padding: 8px 16px 8px 16px;
                                                border: solid 0px transparent;
                                                border-radius: 26px;
                                            }
                .CategoryHeaderViewButton:hover {
                                                    color: var(--white-color);
                                                    background-color: var(--deep-burgundy);
                                                }
            .CategoryDescriptionBar {
                                        margin-bottom: 26px;
                                        color: var(--text-gray-color);
                                        padding: 0 0 0 0;
                                    }
            .CategoryListBar    {
                                    width: 100%;
                                    background-color: transparent;
                                    display: flex;
                                    flex-direction: row;
                                    flex-wrap: wrap;
                                    justify-content: center;
                                    gap: 26px;
                                    overflow: hidden;
                                } 
            .CategoryListBar::-webkit-scrollbar { height: 4px; background-color: transparent; }
            .CategoryListBar::-webkit-scrollbar-button  { background-color: transparent; }
            .CategoryListBar::-webkit-scrollbar-thumb   { background-color: var(--soft-grey); }
                .CategoryListItemBar    {
                                            width: clamp( 250px, 23%, 420px );
                                            min-width: 250px; max-width: 420px;
                                            background-color: var( --background-gray-color );
                                            padding-bottom: 16px;
                                            border: solid 0 transparent;
                                            border-bottom: solid 1px var(--deep-burgundy);
                                            border-radius: 16px;
                                            display: flex;
                                            flex-direction: column;
                                            flex-shrink: 0;
                                        }
                    /* Category List Item Img Bar */
                    .CategoryListItemImgBar {
                                                height: 400px;
                                                position: relative;
                                                overflow: hidden;
                                            }
                        .CategoryListItemImg    {
                                                    height: 100%; width: 100%;
                                                    box-shadow: 4px 4px 16px var(--soft-grey);
                                                    border: solid 0 transparent;
                                                    border-radius: 16px;
                                                    position: absolute;
                                                    object-fit: cover;
                                                    object-position: center;
                                                    /* animation: pan-lr 6s ease-in-out infinite alternate; */
                                                }
                        .CategoryListItemImgCategoryBar {
                                                            font-size: 18px;
                                                            font-weight: bold;
                                                            color: var(--black-charcoal);
                                                            background-color: rgba( 248, 248, 248 ,0.5 );
                                                            padding: 8px 16px 8px 16px;
                                                            border: solid 0 transparent;
                                                            border-radius: 16px;
                                                            position: absolute;
                                                            bottom: 8px; left: 8px;
                                                        }
                        .CategoryListItemImgWhatsappBar {
                                                            color: var(--black-charcoal);
                                                            background-color: rgba(235,235,235, 0.5);
                                                            padding: 8px 16px 8px 16px;
                                                            border: solid 0 transparent;
                                                            border-radius: 16px;
                                                            position: absolute;
                                                            top: 8px; right: 8px;
                                                            display: flex;
                                                            flex-direction: row;
                                                            align-items: center;
                                                        }
                        .CategoryListItemImgWhatsappBar:hover   {
                                                                    color: var(--white-color);
                                                                    background-color: var(--lighter-grey);
                                                                    opacity: 1;
                                                                }
                            .CategoryListItemImgWhatsappBar p   {
                                                                    font-size: 18px;
                                                                    font-weight: bold;
                                                                    /* margin-right: 8px; */
                                                                }
                            .CategoryListItemImgWhatsappBar img {
                                                                    height: 30px; width: 30px;
                                                                    border: solid 0 transparent;
                                                                    border-top-right-radius: 34px; border-bottom-right-radius: 34px;
                                                                    display: none;
                                                                }
                        .CategoryListItemImgViewIcon    {
                                                            height:36px; width: 36px;
                                                            position: absolute;
                                                            right: 8px; bottom: 8px;
                                                            border: solid 0 transparent;
                                                            border-radius: 36px;
                                                            opacity: 0.7;
                                                        }
                        .CategoryListItemImgViewIcon:hover { opacity: 1; }
                /* Category List Item Details Bar */
                .CategoryListItemDetailsBar {
                                                background-color: transparent;
                                                padding: 16px 16px 0 16px;
                                            }
                    .CategoryListItemDetailsName    {
                                                        font-size: 18px;
                                                        margin: 0;
                                                        color: var(--white-color);
                                                        margin-bottom: 8px;
                                                    }
                    .CategoryListItemDetailsPrice       {
                                                            font-size: 18px;
                                                            font-weight: bold;
                                                            color: var(--text-gray-color);
                                                            margin: 0; margin-left: 16px;
                                                        }
                    /* Category List Item Brand Bar
                   .CategoryListItemDetailsBrandBar {
                                                        font-size: 16px;
                                                        font-weight: bold;
                                                        color: var(--bright-red);
                                                        margin-bottom: 16px;
                                                    }
                    */
                    /* Category List Item Name Bar */
                    .CategoryListItemDetailsNameBar {
                                                        font-size: 14px;
                                                        color: var(--white-color);
                                                        margin: 0;
                                                        margin-bottom: 16px;
                                                    }
                    /* Category List Item Details Description Bar
                    .CategoryListItemDetailsDescriptionBar  {
                                                                color: var(--soft-grey);
                                                            }
                    */
                /* Category List Item Colors Bar
                .CategoryListItemColorsBar  {
                                                color: var(--soft-grey);
                                                padding-top: 16px; padding-bottom: 16px;
                                                margin-left: 26px; margin-right: 26px;
                                                border-top: solid 1px var(--soft-grey);
                                                display: flex;
                                                flex-direction: row;
                                            }
                    .CategoryListItemColorsTitleText    {
                                                            font-weight: bold;
                                                            color: var(--black-charcoal);
                                                            margin-right: 8px;
                                                        }
                */
                /* Category List Item Bar */
                /* Category List Item Bar */
    
    /* Product View Board */
    #ProductsViewBoard  {
                            background-color: transparent;
                            padding: 56px 0 0 0;
                        }
        /* Product Filter Option Bar */
        #ProductViewOptionsBar  {
                                    background-color: transparent;
                                    margin-bottom: 26px;
                                }
                #ProductViewOptionBackBar {
                                                font-size: 16px;
                                                font-weight: bold;
                                                color:              var( --white-color );
                                                width: fit-content;
                                                background-color: transparent;
                                                padding: 8px 26px 8px 12px;
                                                display: flex;
                                                flex-direction: row;
                                                align-items: center;
                                                border: solid 0 transparent;
                                                border-radius: 26px;
                                            }
                    #ProductViewOptionBackBar img {
                                                        height: 36px; width: 36px;
                                                        margin-right: 8px;
                                                    }
                #ProductViewOptionBackBar:hover   {
                                                        background-color: var( --border-color );
                                                        border: solid 0 transparent;
                                                        box-shadow: 4px 4px 4px var(--soft-grey);
                                                    }
        /* Product Filter Product Bar */
        /* Product View Bar */
        #ProductViewBar {
                            width: clamp( 250px, 98%, 1300px );
                            background-color: transparent;
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            align-items: flex-start;
                            justify-content: space-between;
                            padding-bottom: 36px;
                            gap: 26px;
                        }
            /* Product View Img Bar */
            #ProductViewImgBar  {
                                    width: 55%;
                                    height: 600px;
                                    background-color: transparent;
                                    position: relative;
                                    overflow: hidden;
                                    border: solid 0 transparent;
                                    border-radius: 16px;
                                    box-shadow: 8px 8px 8px var( --deep-burgundy );
                                }
                #ProductViewImgBar img  {
                                            height: 100%; width: 100%;
                                            border: solid 0 transparent;
                                            border-radius: 16px;
                                            position: absolute;
                                            object-fit: cover;
                                            object-position: center;
                                            /* animation: pan-lr 6s ease-in-out infinite alternate; */
                                        }
            /* Product View Details Bar */
            #ProductViewDetailsBar  {
                                        width: 40%;
                                        background-color: transparent;
                                        margin-top: auto; margin-bottom: auto;
                                        display: flex;
                                        flex-direction: column;
                                        justify-content: center;
                                    }
                #ProductViewDetailsBrandBar             {
                                                            font-size: 26px;
                                                            font-weight: bold;
                                                            color: var( --red-color );
                                                            margin-bottom: 16px;
                                                        }
                #ProductViewDetailsNameBar              {
                                                            font-size: 26px;
                                                            font-weight: bold;
                                                            font-family: 'Playfair Display', serif;
                                                            color: var( --white-color );
                                                            margin-bottom: 16px;
                                                        }
                #ProductViewDetailsPriceBar             {
                                                            font-size: 22px;
                                                            font-family: 'Playfair Display', serif;
                                                            font-weight: bold;
                                                            color: var( --champagne );
                                                            margin-left:16px; margin-bottom: 26px;
                                                        }
                #ProductViewDetailsDescriptionBar       {
                                                            font-size: 16px;
                                                            color: var( --text-gray-color );
                                                            margin-bottom: 36px;
                                                        }
                #ProductViewDetailsWhatsAppAnchor   {
                                                        width: fit-content;
                                                        margin-bottom: 36px;
                                                        border: solid 0 transparent;
                                                        border-radius: 26px;
                                                    }
                    #ProductViewDetailsWhatsAppBar          {
                                                                font-size: 18px;
                                                                font-weight: bold;
                                                                color: var(--white-color);
                                                                width: fit-content;
                                                                background-color: #008000;
                                                                padding: 8px 8px 8px 26px;
                                                                border: solid 0 transparent;
                                                                border-radius: 26px;
                                                                display: flex;
                                                                flex-direction: row;
                                                                align-items: center;
                                                                justify-content: right;
                                                            }
                    #ProductViewDetailsWhatsAppBar:hover    {
                                                                background-color: black;
                                                            }
                        #ProductViewDetailsWhatsAppBar img  {
                                                                height: 36px; width: 36px;
                                                                margin-left: 36px;
                                                            }
            #ProductViewDetailsSizeBar  {
                                            color: var( --text-gray-color );
                                            margin-bottom: 16px;
                                            padding-top: 16px; padding-left: 8px;
                                            border-top: solid 1px var( --deep-burgundy );
                                            display: flex;
                                            flex-direction: row;
                                            flex-wrap: wrap;
                                        }
                #ProductViewDetailsSizeBar P:first-child { margin-right: 8px; }
            #ProductViewDetailsColorsBar    {
                                                color: var( --text-gray-color );
                                                padding-left: 8px;
                                                margin-bottom: 16px;
                                            }
            #ProductViewDetailsCategoryBar  {
                                                color: var( --text-gray-color );
                                                padding-top: 16px; padding-left: 8px;
                                                border-top: solid 1px var( --deep-burgundy );
                                            }

@media screen and ( min-width: 450px ) and ( max-width: 780px )
{
    /* Category Board */
        /* Category Bar
        .CategoryBar    {}
        */
            /* Category Header Bar */
            .CategoryHeaderBar { padding: 0 0 0 0; margin-bottom: 8px; }
                .CategoryHeaderTitle    { font-size: 30px; }
            .CategoryDescriptionBar { padding: 0 8px 0 8px; }

    /* Product View Board */
    #ProductsViewBoard  { padding: 36px 0 0 0; }
        /* Product Filter Options Bar */
        /* Product Filter Product Bar */
        #ProductViewBar {
                            padding-bottom: 0;
                            flex-direction: column;
                            align-items: center;
                            justify-content: flex-start;
                            gap: 46px;
                        }
            /* Product View Img Bar */
            #ProductViewImgBar  {
                                    width: 98%;
                                    height: 500px;
                                }
            /* Product View Details Bar */
            #ProductViewDetailsBar  {
                                        width: 98%;
                                    }
}

@media screen and ( min-width: 1px ) and ( max-width: 450px )
{
    /* Category Board */
        /* Category Bar
        .CategoryBar    {}
        */
            /* Category Header Bar */
            .CategoryHeaderBar { padding: 0 8px 0 8px; margin-bottom: 0; }
                .CategoryHeaderTitle    { font-size: 24px; }
            .CategoryDescriptionBar { padding: 0 0 0 8px; }

    /* Product View Board */
    #ProductsViewBoard  { padding: 36px 0 0 0; }
        /* Product Filter Options Bar */
        /* Product Filter Product Bar */
        #ProductViewBar {
                            padding-bottom: 0;
                            flex-direction: column;
                            justify-content: flex-start;
                            align-items: center;
                            gap: 46px;
                        }
            /* Product View Img Bar */
            #ProductViewImgBar  {
                                    width: 96%;
                                    height: 450px;
                                }
            /* Product View Details Bar */
            #ProductViewDetailsBar  {
                                        width: 90%;
                                    }
}