/* ===============================
   AUCTION GRADE BADGE (40px default)
   =============================== */
:root {
    --grade-size: 40px;
    --text-carbon: #0E0E10;
    --accent-copper: #B87333;
    --accent-gold: #D4AF37;
    --gold-light: #F9E498;
    --gold-dark: #AA8A2E;
    --accent-burnished: #D18F4E;
    --support-steel: #C8CDD3;
}

.grade-badge {
    --size: var(--grade-size);
    position: relative;
    width: var(--size);
    height: var(--size);
    border-radius: calc(var(--size) * .18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.30);
    box-shadow: 0 6px 14px rgba(0,0,0,.10);
}

.grade-number {
    font-size: calc(var(--size) * .42);
    font-weight: 900;
    line-height: 1;
    margin-top: 2px;
}

.grade-stars {
    font-size: calc(var(--size) * .12);
    letter-spacing: 1px;
    margin-top: 1px;
    opacity: .9;
}

.grade-badge::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 50%;
    background: linear-gradient(to bottom, rgba(255,255,255,.25), transparent);
    pointer-events: none;
}

/* S */
.grade-s {
    background: radial-gradient(circle at top left, #2c2c2e 0%, var(--text-carbon) 100%);
    border: 1.5px solid var(--accent-gold);
    box-shadow: 0 12px 26px rgba(0,0,0,.30), inset 0 0 12px rgba(212,175,55,.18);
}

    .grade-s .grade-number {
        background: linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 45%, var(--accent-gold) 50%, var(--gold-light) 55%, var(--gold-dark) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        filter: drop-shadow(0 0 8px rgba(212,175,55,.45));
    }

/* 6 */
.grade-6 {
    background: linear-gradient(135deg, #8a5324 0%, var(--accent-burnished) 40%, #D18F4E 60%, #6b401a 100%);
    color: #fff;
}

/* 5 */
.grade-5 {
    background: linear-gradient(135deg, #6b401a 0%, var(--accent-copper) 50%, #4a2c11 100%);
    color: #fff;
}

/* R */
.grade-r {
    background: linear-gradient(135deg, #7f1d1d 0%, #ef4444 55%, #4a0f0f 100%);
    color: #fff;
}

/* 1–4.5 */
.grade-low {
    background: linear-gradient(145deg, #ffffff 0%, var(--support-steel) 100%);
    color: var(--text-carbon);
    border: 1px solid #fff;
}

    .grade-low .grade-stars {
        color: var(--accent-copper);
    }

/* ===============================
   SPEC LAYOUT (like your screenshot)
   =============================== */
.pd-spec-grade .k {
    margin-bottom: 6px;
}

.grade-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.grade-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.grade-value {
    font-size: 16px;
    font-weight: 800;
    color: var(--text-carbon);
}

.grade-link {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-copper);
    text-decoration: underline;
}