/* Premium certification plate shared by the customer shop, cart, and Operations. */
.slab {
    --metal-ink: #17140e;
    --metal-rule: rgba(34, 28, 18, .28);
    --metal-glint: rgba(255, 255, 255, .6);
    --metal-edge: rgba(92, 67, 23, .72);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 7px;
    padding: 10px 12px 9px;
    border: 1px solid var(--metal-edge);
    border-radius: 10px 10px 0 0;
    color: var(--metal-ink);
    font-family: "Arial Narrow", "Roboto Condensed", "Franklin Gothic Medium", "Segoe UI", sans-serif;
    box-shadow:
        inset 0 1px 0 var(--metal-glint),
        inset 0 -1px 0 rgba(0, 0, 0, .24),
        inset 1px 0 0 rgba(255, 255, 255, .2),
        0 3px 10px rgba(0, 0, 0, .24);
    isolation: isolate;
}

/* Fine grain without the synthetic barcode-like stripes of the old treatment. */
.slab::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(circle at 18% -25%, rgba(255,255,255,.52), transparent 45%),
        linear-gradient(115deg, transparent 0 42%, rgba(255,255,255,.16) 48%, transparent 55%),
        repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, rgba(0,0,0,.018) 1px 2px);
    opacity: .9;
    pointer-events: none;
}

.slab > :not(.slab-shine) {
    position: relative;
    z-index: 2;
}

/* Quiet static glint; motion is reserved for actual interaction. */
.slab-shine {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(102deg, transparent 0 64%, rgba(255,255,255,.18) 72%, transparent 80%);
    pointer-events: none;
}

/* Tier metals: deep mid-tones plus narrow highlights resemble anodized plates. */
.slab-gold {
    --metal-edge: #8f691d;
    --metal-rule: rgba(71, 48, 10, .3);
    background: linear-gradient(135deg, #f2dda0 0%, #cfae55 34%, #b68c32 55%, #ddc172 77%, #b4872c 100%);
}

.slab-silver {
    --metal-ink: #131c27;
    --metal-edge: #87929d;
    --metal-rule: rgba(25, 38, 52, .25);
    background: linear-gradient(135deg, #edf1f3 0%, #c3ccd2 35%, #98a4ae 55%, #d7dde1 78%, #a7b1ba 100%);
}

.slab-bronze {
    --metal-ink: #24150b;
    --metal-edge: #7e4e29;
    --metal-rule: rgba(65, 35, 15, .32);
    background: linear-gradient(135deg, #dca777 0%, #b8733f 34%, #8f542c 56%, #c98c5a 78%, #965b32 100%);
}

.slab-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

.slab-id {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.12;
}

.slab-set {
    overflow: hidden;
    font-size: .57rem;
    font-weight: 850;
    letter-spacing: .035em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .78;
}

.slab-num {
    font-size: .56rem;
    font-weight: 850;
    opacity: .68;
}

.slab-player {
    margin-top: 2px;
    overflow: hidden;
    font-size: .84rem;
    font-weight: 1000;
    line-height: 1.02;
    letter-spacing: -.012em;
    text-transform: uppercase;
    white-space: normal;
    overflow-wrap: anywhere;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.slab-grade {
    flex: 0 0 auto;
    min-width: 48px;
    min-height: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4px 6px;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 9px;
    color: #f8f7f2;
    background: linear-gradient(155deg, rgba(8,16,27,.96), rgba(18,28,40,.88));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 2px 5px rgba(0,0,0,.24);
    line-height: .88;
}

.slab-grade b {
    font-size: 1.48rem;
    font-weight: 1000;
    letter-spacing: -.035em;
    text-shadow: 0 1px 2px rgba(0,0,0,.55);
}

.slab-grade small {
    max-width: 58px;
    margin-top: 3px;
    overflow: hidden;
    font-size: .43rem;
    font-weight: 900;
    letter-spacing: .075em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: .8;
}

.slab-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-top: 6px;
    border-top: 1px solid var(--metal-rule);
}

.slab-sub {
    min-height: 20px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 5px;
    border: 1px solid rgba(0,0,0,.12);
    border-radius: 5px;
    background: rgba(255,255,255,.15);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
    font-size: .59rem;
    font-weight: 950;
}

.slab-sub i {
    font-style: normal;
    font-size: .4rem;
    font-weight: 950;
    letter-spacing: .055em;
    opacity: .6;
}

.slab-nograde {
    opacity: .7;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* The rich hover/focus panel is a shop-only enhancement. Other uses of the
   shared label retain the compact plate without hidden interactive content. */
.slab-detail-popover {
    display: none;
}

/* Compact variant on very small tiles. */
@container (max-width: 170px) {
    .slab-player { font-size: .72rem; }
    .slab-grade b { font-size: 1.3rem; }
    .slab-sub { padding-inline: 3px; }
    .slab-sub i { display: none; }
}