.centered-flower {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 6vh;
    margin-bottom: 7vh;
}

.bottom-menu {
    width: 100%;
    display: flex;
    flex-direction: row;
    height: max-content;
    font-style: var(--holzhof-font-style-normal);
    font-weight: var(--holzhof-font-weight-normal);
    font-family: var(--holzhof-font-family-roboto);
    letter-spacing: var(--holzhof-character-spacing-0);
    text-align: left;
    opacity: 1;
    margin-bottom: 80px;

    .hzf-menu{
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr;
        grid-auto-rows: 40px;
        background-image: repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 14px);
        background-position: left bottom;
        background-repeat: repeat-x;
        background-size: 100% 2px;
        align-items: end;
        padding: 20px;

        .menu-header{
            text-align: left;
            grid-column: 1 / span 4;
            grid-row: 1 / span 2;
            color: var(--holzhof-color-grey);
            font-size: var(--holzhof-font-size-32);
            line-height: var(--holzhof-line-spacing-38);

            span {
                color: var(--holzhof-color-green);
            }
        }
    }

    /*
    .modo-menu{
        display: grid;
        grid-template-columns: 1fr;
        grid-auto-rows: 40px;
        background-image: repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 14px), repeating-linear-gradient(180deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 14px), repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 14px), repeating-linear-gradient(180deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 14px);
        background-position: left top, right top, left bottom, left top;
        background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
        background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
        border-radius: 10px;
        padding: 20px;
        margin-left: 40px;
        width: 25%;
        align-items: end;

        img{
            grid-row: 1 / span 2;
            max-height: 100%;
        }
    }
    */

    a {
        padding-left: 20px;
        column-span: 1;
        color: var(--holzhof-color-grey);
        background-image: url("../svg/fiore-pieno.svg");
        background-repeat: no-repeat;
        background-size: 10px;
        background-position: left;
    }
}

.items-categorie {
    display: grid;
    grid-template-columns: 30.3% 30.3% 30.3%;
    grid-column-gap: 3vw;
    grid-row-gap: 6vh;
    grid-auto-rows: 45vh;
    margin-bottom: 7vh;
    
    .item {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
        height: 100%;
        width: 100%;
        background-image: repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px), repeating-linear-gradient(180deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px), repeating-linear-gradient(90deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px), repeating-linear-gradient(180deg, var(--holzhof-color-green), var(--holzhof-color-green) 3px, transparent 3px, transparent 11px);
        background-position: left top, right top, left bottom, left top;
        background-repeat: repeat-x, repeat-y, repeat-x, repeat-y;
        background-size: 100% 2px, 2px 100%, 100% 2px, 2px 100%;
        border-radius: 10px;
        padding: 3vh;
	overflow: hidden;

        img {
            /*height: 70%;
            max-width: 100%;
            align-self: center;
            border-radius: 10px;
            object-fit: cover;*/
            flex-grow: 1;
            width: 100%;
            max-width: 100%;
            align-self: center;
            border-radius: 10px;
            object-fit: contain !important;
            overflow: hidden;
        }

        .testi{
            font-style: var(--holzhof-font-style-normal);
            font-weight: var(--holzhof-font-weight-bold);
            font-family: var(--holzhof-font-family-roboto);
            letter-spacing: var(--holzhof-character-spacing-0);
            
            h3 {
                font-size: var(--holzhof-font-size-24);
                line-height: var(--holzhof-line-spacing-38);
                color: var(--holzhof-color-grey);
                text-align: left;
                opacity: 1;
            }

            .product-code {
                padding: 3px 20px 3px 20px;
                border-radius: 27px;
                border: 2px solid var(--holzhof-color-grey);
                height: 3vh;
                background-color: var(--holzhof-color-grey);
                color: var(--holzhof-color-white);
            }
        }
    }
}

.center {
    width: 100%;
    display: flex;
    justify-content: center;
}

.bottone-grande {
    font-style: var(--holzhof-font-style-normal);
    font-weight: var(--holzhof-font-weight-bold);
    font-family: var(--holzhof-font-family-roboto);
    letter-spacing: var(--holzhof-character-spacing-0);
    font-size: var(--holzhof-font-size-24);
    line-height: var(--holzhof-line-spacing-38);
    color: var(--holzhof-color-grey);
    background-color: var(--holzhof-color-white);
    text-align: center;
    opacity: 1;
    transition: 0.3s;
    border-radius: 27px;
    border: 1px solid var(--holzhof-color-green);
    padding: 5px 4vw 5px 4vw;
    margin-bottom: 10vh;

    &:hover {
        transition: 0.3s;
        background-color: var(--holzhof-color-green);
        color: var(--holzhof-color-white);
    }
}


/*---------------------------------------------------------
                        VISTA MOBILE
---------------------------------------------------------*/
@media (max-width: 999px){
    /* MENU INFONDO ALLA PAGINA */
    .hzf-menu{
        grid-template-columns: 1fr 1fr !important;

        .menu-header{
            grid-column: 1 / span 2 !important;
        }
    }
}

@media (max-width: 650px){
    /* MENU INFONDO ALLA PAGINA */
    .hzf-menu{
        grid-template-columns: 1fr !important;

        .menu-header{
            grid-column: 1 !important;
        }
    }
}

@media (max-width: 799px){
    /* RIQUADRI DELLE PAGINE CATEGORIA */
    .items-categorie{
        grid-template-columns: 1fr !important;
        grid-auto-rows: auto;

        .item{
            min-height: 45vh;
        }
    }
}

@media (min-width: 800px) and (max-width: 1200px){
    /* RIQUADRI DELLE PAGINE CATEGORIA */
    .items-categorie{
        grid-template-columns: 1fr 1fr !important;
        grid-auto-rows: auto;

        .item{
            min-height: 45vh;
        }
    }
}