/* ─── Size Chart – Frontend Tab ─────────────────────────────────── */

.scm-front-wrap {
    padding: 24px 0 8px;
    direction: rtl;
    font-family: inherit;
}

.scm-front-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0 0 18px;
    padding-bottom: 10px;
    border-bottom: 2px solid #eee;
}

.scm-front-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
    box-shadow: 0 2px 14px rgba(0,0,0,.07);
}

/* ─── Table ── */

.scm-front-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
    background: #fff;
    min-width: 420px;
}

.scm-front-table thead tr {
    background: #1a1a1a;
}

.scm-front-table thead th {
    color: #fff;
    padding: 13px 16px;
    font-weight: 600;
    text-align: center;
    letter-spacing: .3px;
    white-space: nowrap;
}

.scm-front-table thead th.scm-th-size {
    min-width: 68px;
}

.scm-front-table tbody tr {
    border-bottom: 1px solid #f0f0f0;
    transition: background .15s;
}

.scm-front-table tbody tr:hover {
    background: #f6f6f6;
}

.scm-front-table tbody tr.scm-row-alt {
    background: #fafafa;
}

.scm-front-table tbody tr.scm-row-alt:hover {
    background: #f2f2f2;
}

.scm-front-table td {
    padding: 11px 16px;
    text-align: center;
    color: #333;
}

/* ─── Size Badge ── */

.scm-size-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #1a1a1a;
    color: #fff;
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .5px;
}

/* ─── Measure Cell ── */

.scm-measure-cell {
    font-variant-numeric: tabular-nums;
}

.scm-unit {
    font-size: .75rem;
    color: #999;
    margin-right: 2px;
}

.scm-dash {
    color: #ccc;
}

/* ─── Stock ── */

.scm-stock {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: .83rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
}

.scm-in-stock {
    background: #e8f8ef;
    color: #1a9e4f;
}

.scm-no-stock {
    background: #fdecea;
    color: #d32f2f;
}

/* ─── Empty / Note ── */

.scm-empty {
    padding: 20px;
    color: #aaa;
    font-style: italic;
}

.scm-note {
    margin: 10px 0 0;
    font-size: .78rem;
    color: #aaa;
}