@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap');

/* Basic Styling : Start */
:root {
    --white: #FFFFFF;
    --grey: #F7F7F7;
    --lightBlue: #DDE6ED;
    --cadetBlue: #9DB2BF;
    --electricBlue: #526D82;
    --darkBlue: #27374D;
    --black: #000000;
}

body {
    font-family: lato;
    margin: 0;
    color: var(--darkBlue);
    font-size: 16px;
}

#mainContent {
    margin: 0 auto;
    max-width: 1366px;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.75em;
}
/* Basic Styling : End */

/* Common Elements Styling : Start */
.link {
    color: var(--darkBlue);
    text-decoration: none;
}

.unorderedList {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.icon {
    padding-left: 16px;
    display: inline;

    a {
        color: var(--lightBlue);
        text-decoration: none;
    }
}

#pageHeading {
    margin-bottom: 16px;

    .pageHeading {
        margin: 0;
    }
}

#subHeading {
    margin-bottom: 16px;
    text-align: center;

    .subHeading {
        margin: 0;
    }
}

#productsFilter {
    margin-bottom: 8px;

    .desktopView  {
        display: flex;
        overflow: scroll;
        word-break:keep-all;
        column-gap: 12px;

        .categoryName {
            padding: 8px;
            border-radius: 8px;
            font-size: 1.05em;
            background-color: var(--white);
            border: solid 1px var(--darkBlue);
            margin-bottom: 8px;
        }

        .categoryName:hover {
            background-color: var(--darkBlue);
            color: var(--white);
            cursor: pointer;
        }
    }
}

#productsGrid {
    display: grid;
    grid-template-columns: 24% 24% 24% 24%;
    column-gap: 1%;
    row-gap: 24px;

    #productThumbnail {
        text-align: center;

        .productImage {
            width: 100%;
            display: block;
            margin-bottom: 8px;
            border-radius: 24px;
        }

        .productName {
            color: var(--darkBlue);
            margin-bottom: 4px;
            display: block;
            font-weight: bold;
        }

        .productCode {
            font-weight: bold;
            color: var(--electricBlue);
        }
    }
}
/* Common Elements Styling : End */

/* Navbar Styling : Start */
#navbar {
    margin-bottom: 24px;
}
/* Navbar Styling : End */

/* Footer Styling : Start */
#footer {
    background-color: var(--darkBlue);
    color: var(--lightBlue);
    padding: 0 24px;
    margin-top: 24px;

    #socialMedia {
        border-bottom: #DDE6ED solid 1px;
        padding: 16px 0;

        .unorderedList {
            display: inline;
        }
    }

    #footerDetails {
        padding: 16px 0;
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-areas: "copyrights pageLinks";
    }

    #copyrights {
        grid-area: copyrights;
    }

    #pageLinks {
        grid-area: pageLinks;
        text-align: end;

        .unorderedList #pageLink {
            display: inline;

            .link {
                color: var(--lightBlue);
            }
        }
        .unorderedList #pageLink:not(:first-child) {
            padding-left: 8px;
            margin-left: 8px;
            border-left: solid 1px var(--lightBlue);
        }
    }
}
/* Footer Styling : End */

/* Product Grid Styling : Start */
#product {
    display: grid;
    width: 100%;
    margin-bottom: 24px;
    grid-template-columns: 48% 50%;
    grid-template-areas: "imageGallery productDetails";
    column-gap: 2%;

    #imageGallery {
        grid-area: imageGallery;
        text-align: center;

        #mainImage #centerImage {
            width: 100%;
            margin-bottom: 8px;
            border-radius: 24px;
        }

        #thumbnails img {
            width: 64px;
            margin-right: 8px;
            border-radius: 12px;
        }
    }

    #productDetails {
        grid-area: productDetails;

        #productName {

            #pageHeading {
                margin-bottom: 8px;
            }

            #productCode {
                color: var(--electricBlue);
                font-weight: bold;

                span:nth-child(1) {
                    display: inline;
                    margin-right: 8px;
                }

                span:nth-child(2) {
                    border-left: solid 1px var(--electricBlue);
                    padding-left: 8px;
                    margin-right: 8px;
                }
                
                span:nth-child(3) {
                    border-left: solid 1px var(--electricBlue);
                    display: inline;
                    padding-left: 8px;                
                }
            }
        }

        #description {
            text-wrap: wrap;
            margin: 16px 0;

            #features {
                margin: 0 0 16px 0;
            }

            #symbols {
                text-align: center;
            }
        }

        #colours {
                
            #subHeading {
                text-align: left;
                margin-bottom: 12px;
            }

            i {
                font-size: 2.5em;
                margin-right: 8px;
            }
        }

        #otherDetails {
            margin: 24px 0;

            #subHeading {
                text-align: left;
                margin-bottom: 12px;
            }

            #table{
                width: 100%;
                text-align: center;
                display: grid;
                grid-template-columns: 100%;
                grid-template-areas: "titles" "values";
                border-top: solid 1px var(--electricBlue);
                border-bottom: solid 1px var(--electricBlue);
                padding: 8px 0;

                .titles {
                    grid-area: titles;
                    padding-bottom: 8px;
                    font-weight: bold;
                    border-bottom: solid 1px var(--electricBlue);
                    display: grid;
                    grid-template-columns: 25% 25% 25% 25%;
                }

                .values {
                    grid-area: values;
                    padding-top: 8px;
                    display: grid;
                    grid-template-columns: 25% 25% 25% 25%;
                }
            }
        }
    }
}
/* Product Grid Styling : End */

/* Categories Grid Styling : Start */
#categories {
    margin: 24px 0 0 0;

    #categoryGrid {
        display: flex;
        column-gap: 16px;
        overflow: scroll;

        #category {

            img, span {
                display: block;
            }

            .categoryImage {
                width: 240px;
                height: 240px;
                border-radius: 24px;
                margin-bottom: 8px;
            }

            .categoryName, .categoryCount {
                text-align: center;
            }

            .categoryName {
                font-weight: bold;
                color: var(--darkBlue);
                margin-bottom: 4px;
            }

            .categoryCount {
                color: var(--electricBlue);
                margin-bottom: 8px;
                font-weight: bold;
            }
        }
    }    
}
/* Categories Grid Styling : End */