.comments-header{
    background: linear-gradient(263.76deg, rgba(255, 126, 0, 0.94) 0.33%, rgba(255, 92, 0, 0.94) 98.16%), url(../img/thumbnail-piwi.png);
    padding: calc(var(--gap) * 6) var(--gap) calc(var(--gap) * 2);
    position: relative;
    display: flex;
    justify-content: center;
    background-size: cover;
    align-items: center;
    flex-direction: column;
    color: var(--white);
}
.comments-header svg{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, calc(var(--gap) * -2));
    height: calc(var(--gap) * 10);
}
.main-comments-title{
    font-size: 2rem;
    font-weight: 600;
    padding-top: var(--gap);
    margin-bottom: 0;
}

#comments ol {
    list-style: none;
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}
#comments ol ol {
    list-style: none;
    margin: 0px;
    padding: calc(var(--gap) * 0) 0 calc(var(--gap) * 0) calc(var(--gap) * 3);
    margin: calc(var(--gap) * 1) 0 calc(var(--gap) * 0) calc(var(--gap) * 1);
}
ol.children {
    position: relative;
    border-left: 1px solid var(--grey);
}
ol.children:before {
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--gap) * 1.5);
    width: calc(var(--gap) * 1.5);
    position: absolute;
    left: calc(var(--gap) * 1);
    top: calc(var(--gap) * 2);
    background: url(../img/icons/answer.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transform: rotate(180deg);
    opacity: 0.3;
}
/* COMMENT CARD */
.comment-list .comment-body {
    position: relative;
    border-radius: var(--radius);
    border: 1px solid var(--grey);
    padding: var(--gap);
}
.comment-list .comment-author.vcard {
    display: flex;
    align-items: center;
    gap: var(--gap);
    color: var(--black);
}

.comment-list footer.comment-meta {
    display: flex;
    align-items: center;
    gap: var(--gap);
    color: var(--grey-2);
    padding-bottom: var(--gap);
    margin-bottom: var(--gap);
    border-bottom: 1px solid var(--grey);
}
.comment-list .comment-content {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}
.comment-list .comment-content p {
    display: block;
    margin: 0;

}

.comment-list .edit-link{
    color: var(--primary);
}
.comment-list span.says {
    display: none;
}

.comment-list .reply {
    position: absolute;
    top: var(--gap);
    right: var(--gap);
    color: var(--wp--preset--color--secondary);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--gap);
}

.comment-list .reply:before {
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(var(--gap) * 1);
    width: calc(var(--gap) * 1);
    background: url(../img/icons/answer.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 1;
}




/* FORM REPONSE */
div#respond {
    background: #F9F9F9;
    border: 1px solid #DFDFDF;
    border-radius: 8px;
    padding: calc(var(--gap) * 2);
    margin-top: calc(var(--gap) * 2);
}


div#respond h3#reply-title{
    margin-top: 0px;
    color: var(--primary);
}
.form-submit #submit{
    display: inline-flex;
    color: var(--white);
    padding: 14px!important;
    justify-content: center;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    border-radius: 18px;
    border: 1.5px solid var(--white);
    background: var(--primary-gradient);
    box-shadow: 0px 1px 14px 0px rgba(106, 106, 106, 0.25);
    cursor: pointer;
    font-size: var(--medium-font);
}


.comment-form-author,
.comment-form-email,
.comment-form-url{
    display: flex;
    width: 100%;
    align-items: center;
    gap: var(--gap);
}


.comment-form-author input,
.comment-form-email input,
.comment-form-url input{
    padding: 1rem;
    width: 100%;
}
.comment-form-author label,
.comment-form-email label,
.comment-form-url label{
    padding: 0;
    width: -webkit-max-content;
    display: flex;
    flex-direction: row;
    min-width: 120px;
}


.comments-header * {
    text-align: center;
}