/* ============================================================
   Woodmart Multi-Size Attributes v2 — woodmart-multi-size.css
   ============================================================ */

/* ── Tab bar ───────────────────────────────────────────────── */
.wmsa-tab-bar {
    display: flex;
    gap: 0;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 0;
}

.wmsa-tab {
    position: relative;
    background: none;
    border: none;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #888;
    cursor: pointer;
    transition: color 0.2s;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}

.wmsa-tab:hover {
    color: #333;
}

.wmsa-tab--active {
    color: #222;
    border-bottom-color: #222;
}

@supports (color: var(--woodmart-primary-color)) {
    .wmsa-tab--active {
        color: var(--woodmart-primary-color, #222);
        border-bottom-color: var(--woodmart-primary-color, #222);
    }
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 480px) {
    .wmsa-tab {
        padding: 8px 12px;
        font-size: 12px;
    }
}