.mg-rating {
--mg-rating-bg: #223039;
--mg-rating-bg-soft: #1a2a34;
--mg-rating-border: rgba(255, 255, 255, 0.08);
--mg-rating-text: #ffffff;
--mg-rating-muted: #c8d2dc;
--mg-rating-primary: #64B5F6;
--mg-rating-primary-strong: #1976d2;
margin: 2rem 0;
color: var(--mg-rating-text);
}
.mg-rating,
.mg-rating * {
box-sizing: border-box;
}
.mg-rating__inner {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 1.5rem;
padding: clamp(1.25rem, 2.5vw, 1.75rem);
background: linear-gradient(180deg, var(--mg-rating-bg) 0%, var(--mg-rating-bg-soft) 100%);
border: 1px solid var(--mg-rating-border);
border-radius: 8px;
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
}
.mg-rating__header {
min-width: 0;
}
.mg-rating__eyebrow {
margin-bottom: 0.4rem;
color: var(--mg-rating-primary);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.mg-rating__product {
margin: 0;
color: var(--mg-rating-text);
font-size: clamp(1.45rem, 3vw, 2rem);
line-height: 1.15;
}
.mg-rating__product a {
color: inherit;
text-decoration-thickness: 1px;
text-underline-offset: 0.18em;
}
.mg-rating__product a:hover,
.mg-rating__product a:focus-visible {
color: var(--mg-rating-primary);
}
.mg-rating__meta {
display: flex;
flex-wrap: wrap;
gap: 0.45rem 0.75rem;
margin-top: 0.7rem;
color: var(--mg-rating-muted);
font-size: 0.92rem;
}
.mg-rating__meta span + span::before {
content: "";
display: inline-block;
width: 4px;
height: 4px;
margin-right: 0.75rem;
vertical-align: middle;
background: var(--mg-rating-primary);
border-radius: 999px;
}
.mg-rating__score {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-width: 150px;
padding: 0.25rem 0;
}
.mg-rating__score-ring {
display: flex;
align-items: center;
justify-content: center;
width: 136px;
height: 136px;
color: var(--mg-rating-text);
background:
radial-gradient(circle at center, var(--mg-rating-bg-soft) 61%, transparent 62%),
conic-gradient(var(--mg-rating-primary) var(--mg-rating-score), rgba(255, 255, 255, 0.12) 0);
border-radius: 999px;
}
.mg-rating__score-value {
font-size: 2.4rem;
font-weight: 800;
line-height: 1;
}
.mg-rating__score-max {
margin-left: 0.2rem;
color: var(--mg-rating-muted);
font-size: 1rem;
font-weight: 700;
line-height: 1;
}
.mg-rating__label {
margin-top: 0.75rem;
padding: 0.28rem 0.7rem;
background: rgba(100, 181, 246, 0.12);
border: 1px solid rgba(100, 181, 246, 0.28);
border-radius: 999px;
color: var(--mg-rating-primary);
font-size: 0.9rem;
font-weight: 700;
}
.mg-rating__criteria {
grid-column: 1 / -1;
display: grid;
gap: 0.9rem;
}
.mg-rating__criterion-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.35rem;
}
.mg-rating__criterion-name {
color: var(--mg-rating-text);
font-weight: 700;
}
.mg-rating__criterion-score {
color: var(--mg-rating-muted);
font-size: 0.92rem;
font-weight: 700;
}
.mg-rating__bar {
height: 8px;
overflow: hidden;
background: rgba(255, 255, 255, 0.1);
border-radius: 999px;
}
.mg-rating__bar span {
display: block;
height: 100%;
background: linear-gradient(90deg, var(--mg-rating-primary-strong), var(--mg-rating-primary));
border-radius: inherit;
}
.mg-rating__notes {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
.mg-rating__note-group {
padding: 0.6rem 1rem;
background: rgba(255, 255, 255, 0.04);
border: 1px solid var(--mg-rating-border);
border-radius: 8px;
}
.mg-rating__note-title {
margin: 0 0 0.75rem;
color: var(--mg-rating-text);
font-size: 0.98rem;
line-height: 1.25;
}
.mg-rating__note-group ul {
margin: 0;
padding: 0;
color: var(--mg-rating-muted);
list-style: none;
}
.mg-rating__note-group li {
position: relative;
display: flex;
align-items: center;
gap: 0.7rem;
min-height: 1.4rem;
}
.mg-rating__note-group li::before {
content: "";
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.15rem;
height: 1.15rem;
border-radius: 999px;
background-repeat: no-repeat;
background-position: center;
}
.mg-rating__note-group--positive li::before {
background-color: #169b5f;
background-image:
linear-gradient(#ffffff, #ffffff),
linear-gradient(#ffffff, #ffffff);
background-size: 0.58rem 0.16rem, 0.16rem 0.58rem;
border: 1px solid rgba(126, 241, 176, 0.72);
}
.mg-rating__note-group--negative li::before {
background-color: #b84444;
background-image: linear-gradient(#ffffff, #ffffff);
background-size: 0.58rem 0.16rem;
border: 1px solid rgba(255, 150, 150, 0.72);
}
.mg-rating__note-group li + li {
margin-top: 0.4rem;
}
.mg-rating__summary {
grid-column: 1 / -1;
padding-top: 1.1rem;
border-top: 1px solid var(--mg-rating-border);
color: var(--mg-rating-muted);
}
.mg-rating__summary p {
margin: 0;
}
.mg-rating__summary p + p {
margin-top: 0.8rem;
}
.mg-rating__offer {
grid-column: 1 / -1;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-top: 1.1rem;
border-top: 1px solid var(--mg-rating-border);
color: var(--mg-rating-text);
}
.mg-rating__offer-label {
color: var(--mg-rating-muted);
font-size: 0.92rem;
font-weight: 700;
}
.mg-rating__offer-content {
display: flex;
justify-content: flex-end;
}
.mg-rating__offer p {
margin: 0;
}
.mg-rating__offer .mg-shoplink {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.6rem;
padding: 0.65rem 1rem;
background: rgba(100, 181, 246, 0.12);
border: 1px solid rgba(100, 181, 246, 0.3);
border-radius: 8px;
color: var(--mg-rating-primary);
font-weight: 700;
line-height: 1.2;
text-decoration: none;
}
.mg-rating__offer .mg-shoplink:hover,
.mg-rating__offer .mg-shoplink:focus-visible {
background: rgba(100, 181, 246, 0.18);
color: var(--mg-rating-text);
}
body.single-post #rank-math-rich-snippet-wrapper {
display: none !important;
}
@media (max-width: 700px) {
.mg-rating__inner {
grid-template-columns: 1fr;
gap: 1.25rem;
}
.mg-rating__score {
align-items: center;
flex-direction: row;
justify-content: flex-start;
gap: 0.9rem;
}
.mg-rating__score-ring {
width: 118px;
height: 118px;
}
.mg-rating__score-value {
font-size: 2.05rem;
}
.mg-rating__label {
margin-top: 0;
}
.mg-rating__notes {
grid-template-columns: 1fr;
}
.mg-rating__note-group {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.mg-rating__criterion-head {
align-items: flex-start;
}
.mg-rating__offer {
align-items: stretch;
flex-direction: column;
gap: 0.65rem;
}
.mg-rating__offer-content {
justify-content: flex-start;
}
.mg-rating__offer .mg-shoplink {
width: 100%;
min-height: 2.9rem;
background: rgba(100, 181, 246, 0.16);
}
}