/*
    Screen size
    min-wdith: 780px
    max-width: more
*/
    /* Elements Styling */
    /* Header Board */
    #HeaderBoard    {
                        height: 80px; width: 100%;
                        background-color: var(--black-charcoal);
                        display: flex;
                        flex-direction: row;
                        align-items: center;
                        justify-content: center;
                        position: fixed;
                        top: 0; left: 0;
                        z-index: 4;
                    }
        /*
        #HeaderTitleBar {
                            font-size: 26px;
                            font-weight: bold;
                            font-family: 'Playfair Display', serif;
                            background: linear-gradient(45deg,#4A301A 0%,#D4AF37 70%,#F2D28B 100%);
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            background-clip: text;
                            color: transparent;
                        }
        */
        #HeaderListBar  {
                            font-weight: normal;
                            background-color: transparent;
                            display: flex;
                            flex-direction: row;
                            margin-top: 8px;
                            gap: 26px;
                        }
            .HeaderListItemCategory { display: block; }
                #HeaderListBar p    {
                                        font-size: 18px;
                                        color: white;
                                    }
                #HeaderListBar p:hover  {
                                            font-weight: bold;
                                            color: var(--red-color);
                                            scale: 1.2;
                                        }

    /* Details Board */
    .DetailsBoard   {
                        color: white;
background-image: 
    linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.50)),
    url("../assets/poster_images/poster_details_img.png");
background-size: cover;
background-position: top center;
background-repeat: no-repeat;
padding: 66px 26px 16px 26px;
display: flex;
flex-direction: column;
box-shadow: 0px 4px 8px var(--deep-burgundy);
                    }
        #DetailsTitleBar    {
                                display: inherit;
                                flex-direction: inherit;
                                align-items: center;
                                justify-content: center;
                                margin-bottom: 36px;
                            }
            #DetailsTitleText   {
                                    font-size: 36px;
                                    font-family: 'Playfair Display', serif;
                                    font-weight: bold;
                                    margin-bottom: 16px;
                                    color: var( --red-color );
                                }
            #DetailsSecondText  {
                                    font-size: 20px;
                                }
        #DetailsOptionsBar  {
                                background-color: transparent;
                                display: inherit;
                                flex-direction: row;
                                justify-content: right;
                                gap: 16px;
                            }
            .DetailsOptionsButtons  {
                                        font-size: 18px;
                                        font-weight: bold;
                                        color: var(--black-charcoal);
                                        background-color: rgba( 248, 248, 248 ,0.7 );
                                        padding: 8px 16px 8px 16px;
                                        border: solid 0 transparent;
                                        border-radius: 26px;
                                    }
            .DetailsOptionsButtons:hover    {
                                                color: var(--white-color);
                                                background-color: transparent;
                                            }

/* Options Board */
#OptionsBoard   {
                    background-color: var(--off-white);
                    padding: 26px 36px 16px 0;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    justify-content: right;
                    gap: 16px;
                }
    .OptionsButton  {
                        font-weight: bold;
                        padding: 8px 16px 8px 16px;
                        border: solid 2px var(--soft-grey);
                        border-radius: 16px;
                    }
    .OptionsButton:hover    {
                                border-color: var(--bright-red);
                            }
    .OptionsButton.active   {
                                color: var(--white-color);
                                background-color: var(--bright-red);
                                border-color: var(--bright-red);
                                box-shadow: 0 4px 4px var(--soft-grey);
                            }

    /* Footer Board */
    #FooterBoard    {
                        background-color: var(--background-gray-color);
                        padding: 0 16px 0 16px;
                    }
        #FooterHeaderBar    {
                                background-color: transparent;
                                display: flex;
                                flex-direction: row;
                                justify-content: space-between;
                                align-items: center; 
                                padding: 16px 16px 16px 16px;
                                border-bottom: solid 1px var(--border-color);
                            }
            #FooterHeaderBar h1 {
                                    font-size: 26px;
                                    font-weight: bold;
                                    font-family: 'Playfair Display', serif;
                                    color: var(--white-color);
                                }
                #FooterHeaderBar h1 > span  {
                                                color: red;
                                                margin-right: 4px;
                                            }
            #FooterHeaderBar button {
                                        font-weight: bold;
                                        color: var( --white-color );
                                        background-color: transparent;
                                        padding: 8px 16px 8px 16px;
                                        margin-top: 6px;
                                        border: solid 0 transparent;
                                        border-radius: 16px;
                                    }
            #FooterHeaderBar button:hover   {
                                                color: var(--white-color);
                                                background-color: var(--black-color);
                                            }
        #FooterBodyBar  {
                            width: clamp( 250px, 100%, 1200px );
                            min-width: 250px; max-width: 1200px;
                            background-color: transparent;
                            padding-top: 36px;
                            margin-left: auto; margin-right: auto;
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            justify-content: space-evenly;
                            gap: 36px;
                        }
            .FooterBodySubBar   {
                                    width: 100px;
                                    background-color: transparent;
                                    display: flex;
                                    flex-direction: column;
                                    justify-content: center;
                                    gap: 8px;
                                }
            #FooterBodyDescriptionBar   {
                                            width: 250px;
                                            color: white;
                                            display: flex;
                                            justify-content: center;
                                        }
            #FooterBodySocialBar    {
                                        width: 180px;
                                    }
            #FooterBodyButtonsBar   {
                                        width: 180px;
                                    }
                .FooterBodyTitleBar {
                                        text-align: center;
                                        font-size: 18px;
                                        font-weight: bold;
                                        color: white;
                                        margin-bottom: 8px;
                                        display: none;
                                    }
                .FooterBodySubBar a {
                                        color: white;
                                        text-align: center;
                                        border: solid 0 transparent;
                                        border-radius: 26px; 
                                    }
                .FooterBodySubBar a:hover   {
                                                color: var(--red-color);
                                            }
                #FooterBodySocialBar a:first-child  {
                                                        margin-bottom: 26px;
                                                    }
                #FooterBodyButtonsBar a:first-child {
                                                        margin-bottom: 26px;
                                                    }
                    .FooterBodySocialSubBar {
                                                font-weight: bold;
                                                padding: 8px 8px 8px 8px;
                                                border: solid 0 transparent;
                                                border-radius: 26px;
                                                display: flex;
                                                flex-direction: row;
                                                flex-wrap: nowrap;
                                                align-items: center;
                                                justify-content: right;
                                                gap: 16px;
                                            }
                    #FooterBodySocialWhatsappBar    {
                                                        background-color: var( --green-color );
                                                    }
                    #FooterBodySocialFacebookBar    {
                                                        background-color: var( --blue-color );
                                                    }
                    #FooterBodySocialInstagramBar   {
                                                        background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
                                                    }
                    #FooterBodySocialTikTokBar  {
                                                    background-color: black;
                                                }
                    #FooterBodySocialWhatsappBar:hover, #FooterBodySocialFacebookBar:hover
                    {
                        color: var(--white-color);
                        background-color: black;
                    }
                    #FooterBodySocialInstagramBar:hover {
                                                            color: var( --white-color );
                                                            background: black;
                                                        }
                    #FooterBodySocialTikTokBar:hover    {
                                                            color: var(--white-color);
                                                            background-color: var(--deep-burgundy);
                                                        }
                        .FooterBodySocialSubBar img {
                                                        height: 36px; width: 36px;
                                                    }
        #FooterCopyBar  {
                            margin-top: 36px; margin-left: 16px; margin-right: 16px;
                            padding: 26px 16px 26px 16px;
                            border-top: solid 2px var(--border-color);
                            display: flex;
                            flex-direction: row;
                            flex-wrap: wrap;
                            align-items: center;
                            justify-content: space-evenly;
                            gap: 26px;
                        }
            #FooterCopyTitleBar {
                                    display: flex;
                                    flex-direction: row;
                                    flex-wrap: wrap;
                                }
                #FooterCopyTitleBar p   {
                                            height: 18px;
                                            color: white;
                                        }
                #FooterCopyTitleFirstText   {
                                                width: 76px;
                                            }
                #FooterCopyTitleSecondText  {
                                                font-weight: bold;
                                                margin-left: 4px; margin-right: 4px;
                                            }
                #FooterCopyTitleThirdText   {
                                                width: 200px;
                                            }
            #FooterCopyPoliciesText {
                                        color: var(--text-gray-color);
                                    }
            #FooterCopyPoliciesText:hover   {
                                                color: black;
                                            }

    /*
    @keyframes pan-lr   {
                            0%      { transform: translateX(0); }
                            100%    { transform: translateX(-30%); }
                        }
    */

/*
    Screen size
    min-width: 1px
    max-wdith: 470px
*/
@media screen and ( min-width: 1px ) and ( max-width: 470px )
{
    /* Header Board */
    #HeaderBoard    { height: 60px; padding: 8px 4px 8px 4px; }
        #HeaderTitleBar { font-size: 20px; }
        #HeaderListBar  { gap: 8px; }
            .HeaderListItemCategory { display: none; }
                #HeaderListBar p    { font-size: 16px; }

    /* Details Board */
    .DetailsBoard   {
                        padding: 26px 16px 16px 16px;
                    }
            #DetailsTitleText   {
                                    font-size: 20px;
                                    margin-bottom: 8px;
                                }
            #DetailsSecondText  {
                                    font-size: 16px;
                                }
            .DetailsOptionsButtons  {
                                        font-size: 16px;
                                    }

    /* Options Board */
    #OptionsBoard   {
                        padding: 16px 8px 16px 16px;
                    }

    /* Categoy Board */
    .CategoryBar    {
                        background-color: transparent;
                        padding: 0 0 0 0;
                    }
                .CategoryHeaderTitle    { font-size: 22px; }

        /* Category List Bar */
        .CategoryListBar    {
                                gap: 16px;
                                padding: 0 8px;
                            }
            /* Category List Item Bar */
            .CategoryListItemBar    {
                                        width: 100%;
                                        min-width: unset;
                                        max-width: 420px;
                                        padding-bottom: 0;
                                    }
                .CategoryListItemImgBar {
                                            height: 270px;
                                            padding-bottom: 0;
                                        }
                

    /* Footer Board */
    /* #FooterBoard    {} */
            #FooterHeaderBar h1 { font-size: 18px; }
        #FooterCopyBar  {
                            justify-content: left;
                        }


    /* Product View Board */
        /* Product View Bar */
            /* Product View Img Bar */
            #ProductViewImgBar  {
                                    width: 100%;
                                }
            /* Product View Details Bar */
            #ProductViewDetailsBar  {
                                        width: 100%;
                                        padding-bottom: 26px;
                                    }
}

/*
    Screen size
    min-width: 470px
    max-wdith: 780px
*/
@media screen and ( min-width: 470px ) and ( max-width: 780px )
{
    /* Header Board */
    #HeaderBoard    { height: 80px; padding: 16px 0 16px 0; }
        #HeaderTitleBar { font-size: 26px; }
        #HeaderListBar  { gap: 26px; }
            .HeaderListItemCategory { display: block; }
                #HeaderListBar p    { font-size: 18px; }

    /* Details Board */
    .DetailsBoard   {
                        padding: 46px 16px 16px 16px;
                    }   
            #DetailsTitleText   {
                                    font-size: 26px;
                                    margin-bottom: 16px;
                                }
            #DetailsSecondText  {
                                    font-size: 18px;
                                }
            .DetailsOptionsButtons  {
                                        font-size: 16px;
                                    }

    /* Options Board */
    #OptionsBoard   {
                        padding: 16px 16px 16px 26px;
                    }

    /* Categoy Board */
    .CategoryBar    {
                        background-color: transparent;
                        padding: 0 0 0 0;
                    }
                .CategoryHeaderTitle    { font-size: 28px; }

            .CategoryListItemBar    {
                                        width: clamp( 230px, 46%, 470px );
                                        max-width: 470px;
                                        padding-bottom: 0;
                                    }
                    /* Category List Item Img Bar */
                    .CategoryListItemImgBar {
                                                height: 330px;
                                                padding-bottom: 0;
                                            }
                /* Category List Item Bar */
                /* Category List Item Bar */

    /* Footer Board */
    /* #FooterBoard    {} */
            #FooterHeaderBar h1 { font-size: 20px; }
        #FooterCopyBar  {
                            justify-content: space-evenly;
                        }

    /* Product View Board */
        /* Product View Bar */
            /* Product View Img Bar */
            #ProductViewImgBar  {
                                    width: 100%;
                                }
            /* Product View Details Bar */
            #ProductViewDetailsBar  {
                                        width: 100%;
                                    }
}