/* April 28, 2024 */

body {
    background-color: #fefefe;
}

main {
    /* margin-top: 4rem; */
    margin-bottom: 12rem;
    margin-bottom: 8rem;
}
main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#first_info_row {
    display: flex;
}


#title_container {
    display: flex;
    align-items: end;
    /* align-items: center; */

    /* border: 1px solid black; */
    /* float: left; */
    /* width: auto; */
}
h2#item_sub_title {
    margin-left: 5px;
    font-size: 80%;
    /* border: 1px solid black; */
    line-height: 1.5;
}





#amazon_reviews_container {
    font-size: 1rem;

/* * * * * */
    /* margin-top: -1rem; */
    /* margin-top: -1.3rem; */ 
/* * * * * */

    margin-right: 0;
    margin-left: auto;

    display: flex;
    align-items: center;

}



#amazon_reviews_logo {
    /* background-image: url('../images/amazon-related/Amazon_icon_x240.svg'); */
    background-image: url('../images/amazon-related/Amazon_icon.png');
    /* background-size: cover; */
    background-repeat: no-repeat;
    background-position: 0, 0;
    /* border: 1px solid red; */
    /* border-bottom: 1px solid red; */
    display: inline-block;
    z-index: 1;

    width: 20px;
    height: 20px;
    background-size: 20px 20px;

    width: 20px;
    height: 20px;

    background-size: 14px 14px;

    /* width: 600px; */
    /* height: 600px; */

    /* vertical-align: middle; */
    margin-top: 3px;

    /* display: flex;
    justify-content: end;
    align-items: center; */
}

#review_stars {
    color: red;
    background-image: url('../images/amazon-stars-system-image.png');
    background-size: 512px 512px;
    background-repeat: no-repeat;
    margin-top: 1px;

    background-position: 47% 94.4%;
    background-position: -2px -216px;

    height: 18px;
    width: 80px;

    /* width: 94px; */
    /* height: 20px; */

    display: inline-block;
    /* border: 1px solid red; */

    margin-left: -3px;
}





/* #image_gallery_container {} */






/* #image_and_description_container { */
#description_container {
    display: flex; /* ? ? ? */
    flex-direction: column;
    justify-content: center;

    width: 80%;
    max-width: 760px;
    margin: auto;
    /* border: 1px solid red; */
}

#image_gallery_container {
    display: flex;
    justify-content: center;
}

/* .other_image_gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    margin-top: 2rem;
} */
.other_image_gallery img {
    /* max-width: ; */
    max-height: 150px;
    width: auto;
    /* width: 10vw; */
}
















/* #opening_screen {
    border: 1px solid red;
    display: flex;
} */
#image_and_description_container { display: flex; }

/* #image_gallery_container {
    border: 1px solid black;
    display: inli;
    float: left;
    width: 30%;
} */
#image_gallery_container {
    /* border: 1px solid black; */
    /* border-top: 1px solid black; */ /* 🧡🧡🧡 */
    /* border-top: 1px solid rgba(10,10,10,0.8); */
}
#image_gallery_container img {
    /* max-width: 30vw; */
    max-width: 360px;
}




#description_boxes_toggle {
    /* border: 1px solid black; */
    /* border-top: 1px solid black; */ /* 🧡🧡🧡 */
    border-top: 1px solid rgba(10,10,10,0.6);
    text-align: center;
    margin-top: 2rem;
    padding-top: 1rem;
}


/* .toggle_button { */
.toggle_button._1 {
    display: inline-block;
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.96rem;
    padding: 5px 10px;
}

/* .toggle_button.active { */
.toggle_button._1.active {
    font-weight: bold;
    text-decoration: none;
    background-color: #d90e0e;
    color: #eee;
}




#secondary_description_boxes_toggle {
    /* border: 1px solid black; */
    /* display: inline-block; */
    display: flex;
    justify-content: center;
    margin-top: 15px;
}
#secondary_description_boxes_toggle { display: none; }
#secondary_description_boxes_toggle.active { display: flex; }


/* .toggle_button._2 { display: none; } */
.toggle_button._2 {
    display: inline-block;
    cursor: pointer;
    font-size: 0.96rem;
    /* padding: 5px 10px; */
    padding: 1px 6px;
    
}
.toggle_button._2.active {
    /* border: 1px solid red; */
    border-bottom: 1px solid red;
}
















.description {
    border-bottom: 1px solid black;
    padding: 24px 30px;
    padding: 8px 30px 24px;
    min-height: 180px;
}
/* .description.active {
    background-color: #ff89cf;
    background-color: #d90e0e;
    color: #eee;
} */


#primary_description_container.active {
    /* border: 1px solid black; */
    display: inline-block;
    /* padding: 24px 30px; */

    /* border-bottom: 1px solid black; */
}
h1 {
    font-weight: 600;
}
h2 {
    font-style: italic;
}

#primary_description_container { display: none; }



#misc_info_title {
    display: flex;
    /* flex-direction: column; */
    justify-content: space-between;

    width: 80%;
}
#misc_info_title {
    font-weight: bold;
    margin-top: 15px;
    border-bottom: 1px solid black;
    /* margin-bottom: 20px; */
    margin-bottom: 6px;

    font-size: 0.9rem;
}

/* #misc_info_title p {} */

#misc_info_title .accordion_down_arrow {
    align-self: flex-end;
    /* justify-self: end; */
    margin-right: 4px;
    /* margin-bottom: 6px; */
    margin-bottom: 2px;
}
#misc_info_title.active .accordion_down_arrow {
    transform: rotate(-180deg);
    transition: 0.6s transform;

}



#misc_details_container {
    /* height: 0; */
    max-height: 0;
    display: none;
}
#misc_details_container.active {
    display: inline-block;
    max-height: none;
}


#misc_details_container {
    /* border: 1px solid red; */
    width: 100%;
}
#misc_details_container table {
    /* border: 1px solid black; */
    width: 100%;
}
#misc_details_container tr {
    padding: 6px 0;
}
#misc_details_container tr:nth-of-type(odd) {
    background-color: #d90e0e;
    background-color: rgba(200,200,200,1);
    background-color: rgba(200,200,200,0.5);
    
}
/* #misc_details_container tr:nth-of-type(n * 2 + 1) { */
#misc_details_container tr:nth-of-type(even) {
    background-color: aqua;
    background-color: rgba(250,250,250,1);
}

#misc_details_container th {
    font-weight: bold;
    text-align: end;
    padding-right: 5px;
}
#misc_details_container td {
    text-align: left;
    padding-left: 5px;
}


/* #misc_details_container {} */










#additional_details_container {
    /* margin: 1rem 0; */
    padding-left: 1rem;
}
#additional_details_container .key, 
#additional_details_container .value {
    display: inline-block;
}
/* #additional_details_container .key { */
.description .key {
    font-weight: bold;
}


#additional_details_container { display: none; }
#additional_details_container.active { display: inline-block; }

#ingredients_detail_container { display: none; }
#ingredients_detail_container.active { display: inline-block; }

#nutrients_info_container { display: none; }
#nutrients_info_container.active { display: inline-block; }








/* Other Flavors */
#other_flavors_container {
    /* border: 1px solid black; */
    padding: 16px;
}

.a_flavor {
    /* border: 1px solid black; */
    display: flex;
    flex-direction: column;

    display: inline-block;
}
/* .a_flavor, .a_flavor p { */
.a_flavor p {
    display: inline-block;
    text-align: center;

    display: flex;
    justify-content: center;
}
























#secondary_description_container {
    /* border: 1px solid black; */
    margin-top: 2rem;
    max-width: 900px;
    width: 80%;
    margin: 3rem auto 2rem;
}
#title-item_description {
    font-weight: 600;
    font-size: 0.9rem;
    padding-left: 2px;
}
#secondary_item_description {
    line-height: 1.3;
}








#other_advertisements {
    margin-top: 5rem;
}


#combo_items_container {
    border: 1px solid red;
    display: flex;
}
#combo_items_image_gallery_container {
    border: 1px solid black;
}
#combo_items_image_gallery_container img {
    max-width: 360px;
}

#combo_item_primary_descriptor_container {
    border: 1px solid black;
    display: inline-block;
    padding: 24px 30px;
}
h3 { font-weight: 600; }
h4 { font-style: italic; }




/* #other_flavors_container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    flex-wrap: wrap;

    display: inline-block;
} */

.other_image_gallery {
    /* border: 1px solid green; */

    /* display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; */
    margin-top: 2rem;

    /* display: grid;
    grid-template-columns: repeat(auto-fill, [col] 140px); */
}
.other_image_gallery img {
    /* max-width: ; */
    max-height: 150px;
    width: auto;
}
.other_image_gallery > span {
    /* border: 1px solid red; */
}


.other_image_gallery {
    margin: auto;
    /* width: 94%; */
}

.other_image_gallery {
    /* display: grid; */
    grid-gap: 10px;
    /* grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); */
}







#primary_item_description { font-size: 0.94rem; }
#misc_details_container { font-size: 0.9rem; }
#ingredients_detail_container, #nutrients_info_container { font-size: 0.9rem; }




#first_info_row {
    border-bottom: 1px solid black;
}




@media only screen and (min-width: 767px) {

    main {
        margin-top: 2.4rem;
    }

    /* #image_and_description_container { */
    #image_gallery_container {
        /* padding-top: 2rem; */
        margin-top: 2rem;
        /* border: 1px solid green; */
    }
    /* #description_container {} */
    #primary_description_container {
        margin-top: 1rem;
        /* width: 80%; */
        padding-bottom: 2.4rem;
    }
    #description_boxes_toggle {
        padding-top: 2rem;
    }

    #misc_info_title {
        margin-top: 1.4rem;
        width: 24%;
    }

    .description {
        min-height: auto;
    }


    #other_flavors_container {
        margin-top: 1.7rem;
        /* border: 1px solid red; */
        width: 80%;
        width: 70%;
        /* display: flex; */
        /* justify-content: center; */

        /* border: 1px solid blue; */

    }
    .other_image_gallery {
        display: grid;
        /* grid-template-columns: 1fr 1fr 1fr 1fr; */
        grid-template-columns: minmax(80px, 1fr);
        grid-template-columns: repeat(auto-fill, [col] 140px);
        grid-gap: 14px;
    }

}





/* @media onlyscreen and (max-width: 700px) { */
/* @media only screen and (max-width: 700px) {} */