@charset "UTF-8";

header{
    & h1{
        margin:1rem 0;
    }

    & h6{
        background-color:var(--primary-color);
    }

    & .button{
        margin-top:1rem;
    }

    & figure{
        text-align:center;

        & img.fluid{
            max-width:400px;
        }
    }

    & p{
        &.breadcrumb{
            margin-bottom:2rem;
            padding:0;
            border-left:0;
            font-size:.9rem;

            & > i{
                margin:0 0.5rem;
                font-size:.8rem;
            }
        }
    }

    &:has(.breadcrumb){
        & h6{
            background-color:var(--secondary-color);
        }
    }
}

aside{
    & .title{
        padding-bottom:0;
        border-bottom:0;
    }

    & .box{
        padding:1rem 0;
        background-color:rgba(
            var(--secondary-color-rgb),0.1
        );
        border-radius:8px;

        & ul{
            margin:0;
            padding:0;
            list-style-type:none;

            & li{
                & a{
                    padding:.5rem 1.5rem;
                    width:100%;
                    height:auto;
                    display:block;
                    font-size:1rem;
                    text-decoration:none;
                    color:var(--zeta-theme-color-text);
                    position:relative;
                    transition:color .3s ease;

                    &::after{
                        content:"";
                        width:5px;
                        height:100%;
                        background-color:var(--secondary-color);
                        position:absolute;
                        top:0;
                        left:0;
                        transition:.3s ease-in-out;
                    }

                    &:hover,
                    &:focus,
                    &:active{
                        color:var(--dark-color);

                        &::after{
                            background-color:var(--primary-color);
                        }
                    }
                }
            }
        }
    }
}

article{
    padding-right:3rem;

    & h3{
        text-transform:capitalize;
    }

    & p{
        text-align:justify;

        & b {
            font-weight:500;
        }
    }

    & h5{
        font-weight:400;
    }
}

#cart{
    & .buttons-cart{
        text-align:right;

        & button{
            margin:.25rem;

            &:first-child{
                margin-left:0;
            }

            &:last-child{
                margin-right:0;
            }
        }
    }
}

#tableCart{
    margin-bottom:2rem;

    & figure{
        width:120px;
        height:120px;

        & > img{
            object-fit:contain;
            object-position:center;
            width:100%;
            height:100%;
        }
    }

    & span{
        margin-bottom:.5rem;
        padding:0 .5rem;
        width:fit-content;
        height:20px;
        display:flex;
        align-items:center;
        background-color:var(--primary-color);
        border-radius:15px;
        font-size:.75rem;
        font-weight:500;
        color:#fff;
    }

    & h5{
        margin-bottom:0;
    }

    & form{
        margin:0 auto;
        width:fit-content;
        display:flex;
        gap:.5rem;

        & input{
            width:80px;
            height:55px;
            text-align:center;
        }
    }
}

#tableSkus{
    & button{
        margin:0 auto;
        width:55px;
        height:55px;
        display:block;
        background-color:var(--primary-color);
        border-radius:50%;
        color:#fff;
        position:relative;

        &::before{
            content:"\f067";
            font-family:"Font Awesome 5 Pro";
            font-weight:500;
            font-size:1.25rem;
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%, -50%);
        }

        &::after{
            content:"";
            width:100%;
            height:inherit;
            background-color:transparent;
            border-radius:inherit;
            border:4px solid rgba(255,255,255,0.5);
            position:absolute;
            top:0;
            left:0;
            bottom:0;
            right:0;
            pointer-events:none;
            transition:0.3s ease-in-out;
        }

        &:hover,
        &:focus,
        &:active{
            &::after{
                border-color:var(--primary-color);
            }
        }
    }
}

@media(max-width:991px){
    article{
        padding-right:2rem;
    }

    #cart{
        & aside{
            margin-top:3rem;
        }
    }

    #tableCart{
        & span{
            margin:0 auto .5rem auto;
        }
    }

    #tableSkus{
        & tbody{
            grid-template-columns:repeat(1, 1fr);
        }

        & button{
            margin-right:0;
        }
    }
}

@media(max-width:767px){
    header{
        & p{
            &.breadcrumb{
                text-align:center;
            }
        }
    }

    article{
        padding-right:0;
    }

    #catalog, #article{
        & aside{
            margin-top:3rem;
        }
    }

    #cart{
        & .buttons-cart{
            text-align:center;
        }
    }

    #tableCart{
        & tbody{
            grid-template-columns:repeat(1, 1fr);
        }
    }

    #tableSkus{
        & tbody{
            grid-template-columns:repeat(2, 1fr);
        }
    }
}

@media(max-width:575px){
    #cart{
        & .buttons-cart{
            & button{
                margin-right:0;
                margin-left:0;
                width:100%;
            }
        }
    }

    #tableSkus{
        & tbody{
            grid-template-columns:repeat(1, 1fr);
        }
    }
}