.avisWrapper {
    margin: 4rem 0 8rem;
}
/**************************************************************************************************/
/********* AVIS HEADERS
/**************************************************************************************************/
.business-header {
    margin-left:var(--gutter-left);
    padding: 0 var(--gutter-left) 1.5em 0;
    margin-bottom: 1.5em;
    display: flex;
    gap: 3rem;
    border-bottom: 1px solid var(--violet);
}
.business-logo {
    width: 180px;
}

.business-name {
    margin: 0;
}
.business-avg {
    display: flex;
    align-items: center;
    margin: .2em 0;
    gap: .5em;
}
.maps-link {
    text-decoration: underline;
}
/**************************************************************************************************/
/********* AVIS
/**************************************************************************************************/
#avis {
    margin-top: 0;
}

#avis .avi {
    width: 550px;
    max-width: 40vw;
    padding: 0 3vw 1rem 0;
}
.aviHeader {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.reviewer-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Roboto, Arial, sans-serif;
    font-size: .9em;
    font-weight: 500;
    color: #202124;
    flex-shrink: 0;
}
.aviHeader .aviAuthor {
    margin: 0 0 .2em 0;
}

.stars {
    display: flex;
    gap: 4px;
    align-items: center;
}
 
.star {
    width: 24px;
    height: 24px;
    display: block;
}

.aviTxt {
    margin: .5rem 0 2rem;
}

.aviLink {
    line-height: 1.7em;
    text-decoration: underline;
}

/* ── ReadMore styles ── */
.read-more-btn {
    font-weight: 600;
    color: #555;
    cursor: pointer;
    text-decoration: underline;
}
.read-more-btn:hover { color: #000; }


@media (max-width: 750px) {
    #avis .avi {
        max-width: 60vw;
    }
}

@media (max-width: 550px) {
    #avis .avi {
        max-width: 80vw;
    }
}