/*
 * Custom code goes here.
 * A template should always ship with an empty custom.css
 */

:root {
    --s: 2rem; /* control the size*/
    --c1: #1A1A1A;
    --c2: #2A2A2A;
    --c3: #272727;

    --red: #B82821;
    --grey: #DFDFDF;
    --light-grey: #AAAAAA;
    --dark-grey: #373737;
    --dark-grey-t: rgba(55, 55, 55, .08);
}

h1 {
    font-size: 1.2rem;
}




.fenix-button {
    display: inline-block;
    padding: 1rem 2rem;

    color: white;
    font-weight: 700;
    font-size: 1rem;

    background: repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 50%) calc(var(--s)/2) calc(var(--s)*tan(30deg)/2), repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 50%);
    background-size: var(--s) calc(var(--s)*tan(30deg));

    box-shadow: .25rem .25rem .5rem var(--dark-grey-t);
    border-bottom: .5rem solid var(--red);

    &:hover {
        opacity: .9;
        cursor: pointer;
    }
}












main {
    #header{
        box-shadow: .25rem .25rem .5rem var(--dark-grey-t);

        .header-nav {
            background: var(--red);

            border-bottom: none;
            font-size: .9rem;
            color: white;

            a {
                color: white; 
            }

            #contact-link {
                a {
                    font-weight: 700; 
                }
            }

            .blockcart {
                background-color: transparent;
                color: white;

                .material-icons.shopping-cart {
                    color: white;
                }
            }
        }

        .header-top {
            background:
            repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 50%) 
             calc(var(--s)/2) calc(var(--s)*tan(30deg)/2),
            repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 50%);
            background-size: var(--s) calc(var(--s)*tan(30deg));


            .menu {
                ul {
                    a {
                        color: white;
                    }

                    &.top-menu {
                        &[data-depth="3"] {
                            display: none;
                        }

                        li {
                            &.category {
                                .sub-menu {
                                    a {
                                        color: var(--dark-grey);
                                        border-bottom-color: var(--grey);

                                        &:hover {
                                            color: var(--red);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }

            #search_widget {
                margin-bottom: 0;

                input {
                    font-size: .9rem;
                }
            }

            #mobile_top_menu_wrapper {
                background: transparent;

                .top-menu {
                    li {
                        a {
                            color: white;
                        }
                    }
                }

                #contact-link {
                    font-weight: 700;
                }

            }
        }
    }

    .featured-products {
        h2.products-section-title {
            font-weight: 700;
        }
    }
}


#footer {
    box-shadow: .25rem .25rem .5rem var(--dark-grey-t);
    border-top: .5rem solid var(--red);

    .footer-container {
        box-shadow: .25rem .25rem .5rem var(--dark-grey-t);

        background:
        repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 50%) 
         calc(var(--s)/2) calc(var(--s)*tan(30deg)/2),
        repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 50%);
        background-size: var(--s) calc(var(--s)*tan(30deg));

        .h3, .h4 {
            color: white;

            a {
                color: white;   
            }
        }

        ul {
            li {
                a {
                    color: var(--light-grey);

                    &:hover {
                        color: white;
                    }
                }
            }
        }

        #contact-infos {
            color: white;
        }
    }
}

#custom-text {
    background:
        repeating-conic-gradient(from 30deg,#0000 0 120deg,#fafafa 0 50%) 
         calc(30px/2) calc(30px*tan(30deg)/2),
        repeating-conic-gradient(from 30deg,#efefef 0 60deg,#fafafa 0 120deg,#fefefe 0 50%);
      background-size: 30px calc(30px*tan(30deg));
    box-shadow: .25rem .25rem .5rem var(--dark-grey-t);
}


#mobile_top_menu_wrapper .top-menu .sub-menu {
    background-color: transparent;
}












/* Home page */
#index {
    #carousel {
        box-shadow: .25rem .25rem .5rem var(--dark-grey-t);
    }

    a.banner {
        box-shadow: .25rem .25rem .5rem var(--dark-grey-t);
    }

    #mainpoints {
        display: flex;
        flex-direction: row;

        .point-item {
            flex-grow: 1;

            display: flex;
            flex-direction: column;
            align-items: center;

            padding: 0 2rem;

            img {
                height: 5rem;
                width: 5rem;
                margin-bottom: 1rem;
            }

            p {

            }
        }
    }
}


/* Category page */
#category {
    #left-column {
        .block-categories {
            box-shadow: .25rem .25rem .5rem var(--dark-grey-t);

            ul.category-top-menu {
                li {
                    .h6 {
                        font-weight: 700;
                        font-size: 1.3rem;
                    }
                }
            }

            ul.category-sub-menu {
                li {
                    a {
                        margin-top: 0;
                        font-size: .9rem;

                        &:hover {
                            color: var(--red);
                        }
                    }
                }
            }
        }
    }

    #main {
        #js-product-list-header {
            .block-category {
                min-height: unset;

                background:
                repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 50%) 
                 calc(var(--s)/2) calc(var(--s)*tan(30deg)/2),
                repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 50%);
                background-size: var(--s) calc(var(--s)*tan(30deg));

                box-shadow: .25rem .25rem .5rem var(--dark-grey-t); 

                h1 {
                    color: white;
                    font-size: 1.8rem;
                }

                .block-category-inner {
                    display: none;
                }
            }
        }

        #subcategories {
            box-shadow: .25rem .25rem .5rem var(--dark-grey-t);
        }
    }
}

#product {
    .breadcrumb {
        font-size: .9rem;
    }

    .product-container {
        .product-flags {
            .product-flag {
                font-size: .8rem;
                padding-right: .5rem;
                border-radius: 0 1rem 1rem 0;
                box-shadow: .25rem .25rem .5rem var(--dark-grey-t);
            }
        }

        .product-cover {
            box-shadow: .25rem .25rem .5rem var(--dark-grey-t);
        }

        .product-images {
            img {
                box-shadow: .25rem .25rem .5rem var(--dark-grey-t); 
            }
        }

        .product-quantity {
            .wishlist-button-add {
                .material-icons {
                    font-size: 1.1rem; 
                }
            }
        }

        .product-information {
            .blockreassurance_product {
                .item-product {
                    height: auto;
                    width: auto;
                    margin: 0 .8rem .8rem 0;
                }

                .block-title {
                    font-weight: 600;
                }

                p {
                    font-size: .8rem;
                }
            }
        }

        .tabs {
            box-shadow: .25rem .25rem .5rem var(--dark-grey-t);
        }
    }

    .product-comment-list-item {
        box-shadow: .25rem .25rem .5rem var(--dark-grey-t);
    }
}


#cms {
    #main {
        #content {
            # padding: 0;

            /* Elenco modelli */

            #models {
                a {
                    img {
                        width: 100%;
                        box-shadow: .25rem .25rem .5rem var(--dark-grey-t);

                        &:hover {
                            opacity: 0.9;
                        }
                    }
                }
            }

            /* Pagina dettaglio modello */

            #model {
                #model-title {
                    padding: 1rem;
                    border-bottom: .5rem solid var(--red);

                    background:
                    repeating-conic-gradient(from 30deg,#0000 0 120deg,var(--c3) 0 50%) 
                     calc(var(--s)/2) calc(var(--s)*tan(30deg)/2),
                    repeating-conic-gradient(from 30deg,var(--c1) 0 60deg,var(--c2) 0 120deg,var(--c3) 0 50%);
                    background-size: var(--s) calc(var(--s)*tan(30deg));

                    h1 {
                        margin: 0; 

                        color: white;
                        font-weight: 700;
                        
                    }
                }

                #model-image {
                    img {
                        width: 100%;
                        box-shadow: .25rem .25rem .5rem var(--dark-grey-t);
                    }
                } 

                #model-info {
                    display: flex;
                    flex-direction: column;

                    padding: 1rem;

                    #model-buttons {
                        display: flex;
                        flex-direction: column;
                        gap: .8rem;

                        padding: 1rem;

                        .fenix-button {
                            white-space: nowrap;
                        }
                    }
                }

                #model-description {
                    padding: 1rem;
                }
            }
        }
    }
}

#products, .featured-products {
    article.product-miniature {
        .thumbnail-container {
            box-shadow: .25rem .25rem .5rem var(--dark-grey-t); 

            .wishlist-button-add {
                .material-icons {
                    font-size: 1.1rem; 
                }
            }

            .product-flags {
                .product-flag {
                    font-size: .8rem;
                    padding-right: .5rem;
                    border-radius: 0 1rem 1rem 0;
                    box-shadow: .25rem .25rem .5rem var(--dark-grey-t);
                }
            }

            .quick-view {
                font-size: .8rem;
            }
        }
    }
}



@media screen and (max-width: 767px) {
    #custom-text {
        display: none;
    }
}

@media screen and (max-width: 991px) {
    #custom-text {
        h6 {
            font-size: .9rem;
        }

        p {
            font-size: .8rem;
        }
    }

    .featured-products {
        .products {
            .product {
                width: 50%;
                min-width: unset; 

                article {
                    .product-description {
                        white-space: nowrap;

                        h3 {
                            a {
                                white-space: nowrap;
                                display: block;
                                text-overflow: ellipsis;
                                overflow: hidden;
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 768px) {
    h1 {
        font-size: 1.4rem;
    }

    #cms {
        #main {
            #content {
                #model {
                    #model-info {
                        flex-direction: row;
                    }
                }
            }
        }
    }

    #top-menu {
        .category {
            .popover {
                width: 100%;
                margin: 1.5rem 0;

                ul {
                    &.top-menu[data-depth="1"] {
                        li {
                            &.category {
                                a {
                                    &.dropdown-item[data-depth="1"] {
                                        color: var(--red);
                                    }
                                }

                                ul {
                                    &.top-menu[data-depth="2"] {
                                        padding-bottom: 1rem;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media screen and (min-width: 992px) {
    h1 {
        font-size: 2rem;
    }
}