/* XXL Card — Rating section */
.egXXL-section-wrappers.rating-wrapper {
    box-sizing: border-box;
}

.rating-title {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 0 0 .5rem 0;
}

.rating-dexa {
    display: inline-flex;
    align-items: center;
    margin: .25rem 0 .75rem;

}

.rating-dexa .dexa {
    font-size: var(--ft-40-31);
}

/* Thumbs-up list — row layout with wrapping */
.rating-likes {
    list-style: none;
    margin: .25rem 0 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    /* wrap to new line when needed */
    align-items: center;
    row-gap: 1rem;
    /* vertical gap between wrapped rows */
    column-gap: 4rem;
    /* horizontal gap between items */
}

.rating-likes>li {
    list-style: none;
}

.rating-likes>li::marker {
    content: "";
}

.rating-like {
    display: inline-flex;
    /* keep icon + text on the same row */
    align-items: center;
    gap: 1.15rem;
    white-space: nowrap;
    /* prevents line break between icon and text */
    color: var(--white-color-1);
    font-family: var(--identity-font);
    font-weight: var(--font-weight5);
    font-size: var(--ft-);
    line-height: 1;
    text-transform: none;
}

/* Make the icon use the category color (propagates from .{{category}}-color → --card-color) */
.rating-like .like-icon {
    display: inline-flex;
    width: 1.5em;
    height: 1.5em;
    color: var(--card-color);
    /* <symbol id="like"> has fill="currentColor" */
}

.rating-like .svg-like {
    width: 1.5em;
    height: 1.5em;
    display: block;
}












/* Guide variant hides toggle header (keeps body content visible) */
.xxl-guide .rating-wrapper .section-toggle {
    display: none;
}


/* Append to card_xxlarge_rating.css — guide-only label above Dexa */
.rating-dexa-label {
    display: none;
    color: var(--grey-color-4);
    font-family: var(--identity-font);
    font-weight: 300;
    font-size: var(--ft-16-15);
    line-height: 1.2;
    letter-spacing: .1px;
}

.rating-likes {
    font-size: var(--ft-16-15);
}

.xxl-guide .rating-dexa-label {
    display: inline-block;
}