.granat-loyalty {
    border: 1px solid #c3483f40;
    border-radius: 6px;
    background: #fffaf3;
    color: #281505;
    padding: 18px 20px;
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.5;
    overflow-wrap: anywhere;
}
.granat-loyalty h3 { font-size: 19px; line-height: 1.3; margin: 0 0 12px; }
.granat-loyalty p { margin: 0 0 9px; }
.granat-loyalty p:last-child { margin-bottom: 0; }
.granat-loyalty__level { font-weight: 700; }
.granat-loyalty .granat-loyalty__hint { margin-top: 12px; font-size: 13px; color: #655349; }
.granat-loyalty .button { margin: 4px 0 8px; }
.granat-loyalty__progress-label { display: block; margin: 20px 0 7px; font-size: 14px; }
.granat-loyalty__progress {
    display: block;
    width: 100%;
    height: 8px;
    margin: 0 0 20px;
    border: 0;
    border-radius: 4px;
    overflow: hidden;
    appearance: none;
    background: #eadfd2;
    accent-color: #c3483f;
}
.granat-loyalty__progress::-webkit-progress-bar { background: #eadfd2; border-radius: 4px; }
.granat-loyalty__progress::-webkit-progress-value { background: #c3483f; border-radius: 4px; }
.granat-loyalty__progress::-moz-progress-bar { background: #c3483f; border-radius: 4px; }
.granat-loyalty .granat-loyalty__tiers { list-style: none; padding: 0; margin: 24px 0 16px; }
.granat-loyalty__tiers li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 16px;
    padding: 13px 0;
    border-top: 1px solid #c3483f26;
}
.granat-loyalty__tiers li[aria-current="step"] strong { color: #9b332b; }
.granat-loyalty__tier-state { grid-column: 1 / -1; color: #655349; font-size: 13px; }
.granat-loyalty a:focus-visible { outline: 2px solid #9b332b; outline-offset: 4px; }
@media (max-width: 480px) {
    .granat-loyalty { padding: 14px; font-size: 14px; }
    .granat-loyalty h3 { font-size: 18px; }
    .granat-loyalty__tiers li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}